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Build for the browser 
with ThreeJs 


5 hot new CSS 

properties 

Add particle effects — 

with particles 3 me ; 

learntousethe ~~ a - Discover the power of th 
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Introducing STORM, a 
hosting platform that makes 
your agency and websites 
run smoother. 80% of our 
customers have seen a 25% 
improvement in site speeds. 


TING 


STORM 


Developed by 
G>NimbusHosting 


nimbushosting.co.uk 


Welcome 


Welcome 
to the issue 


THE WEB DESIGNER MISSION 


Design for emerging experiences 


s the web landscape changes so does 
the user experience and to stay 
competitive you need to embrace the 
new. One thing that doesn’t change is 
the user. If they have a poor user 
experience they will simply look 
elsewhere. So what are the emerging 
experiences that you need to consider 
today and what are the tools needed to achieve 
the right results? 

In our lead feature (p42) Laura Yarrow from 
Experience UX reveals the seven key themes 
that you should be designing for: Inclusivity and 
accessibility, immmersion, trust and transparency, 
coherence, conversation, collaboration and 


efficiency. Alongside these key themes she 
reveals the tools that you will need to ensure 
design success. If you want to keep your users 
happy make sure you take a look. 

WebGL and 3D have been part of the web 
experience for a while, but better support and 
better frameworks means that bigger and 
better experiences are just a few steps away. 
Richard Mattka gives you a rundown on how to 
use ThreeJS to build 3D for the browser today. 
Ever heard of JSX? This issue we give you an 
insight on how to build components faster with 
the help of the JavaScript syntax extension and 
the React library 

As always, enjoy the issue, 


Follow us on Twitter for all the news & conversation 
Visit our blog for opinion, freebies & more 


FX Digital are digital explorers crafting 
engaging and exciting experiences. 
Web Designer finds out more. Page 34 


Video Tuition - 79 minutes of Beginner’s JavaScript video guides 
from StudioWeb (www.studioweb.com) 


Assets 


-14 Pink Photoshop filters and 10 Wooden picture frame mockups 


from Sparklestock (sparklestock.com) 
- Tutorial files and assets 


www -filesilo.co.uk/webdesigner 


welcome 3 


Contributors 


e @ 9 
This issue’s panel of experts 
Welcome to that bit of the mag where we learn more 
about the featured writers and contributors... 


Laura Yarrow 

Laura is a UX architect at 
Bournemouth-based agency 
Experience UX. With a 
background in web 
development and a love of 
new technology. This issue 
Laura shares the future 
themes UX practitioners will 
find themselves designing for, 
and the tools that will 
Support their work. 

Page 42 


Over the next year, expect to see inclusive 
and ethical design become an expected part 


of the UX Design process 


Simon Jones 


~#* Simon leads software 

~ engineering teams working 
with a variety of frontend 
technologies, including 
React. This issue, he covers 
_ the basics of how React, and 
associated technologies like 
JSX, can help you build web 
apps. Page 74 


a 


, 


Frank Kagumba 

] f Frank is a frontend 
developer dealing in CMS, 
HTML5, CSS3 and 
JavaScript. This issue he will 
teach you how to create a 
fullscreen landing page 
using HTML5 and CSS3 and 
animate it using the particle. 
js library. Page 56 


at Vidsy in London. Now 
that we are starting to see 
some of the Houdini styling 
magic appear in users’ 
browsers, Matt takes a look 
at the first piece to land in 
Chrome - the CSS Paint API. 
Page 86 


Matt Crouch 
Matt is a frontend developer 


w 


Mark Shufflebottom 


| Daniel Crisp 
an Page 80 


Mark is a Professor of 
Interaction Design at 


Sheridan College and is also 
an Adobe Education Leader. 


In this tutorial, Mark is 


creating a facial recognition 


photo app that dynamically 


adds a variety of props onto 


users’ faces. Page 52 


Dan is a senior frontend 
developer, currently 
wrangling CSS at Potato for 
a high-profile client. This 
issue he gives a practical 
guide to some exciting new 
CSS features that you can 
try out for yourself today. 


Leon Brown 


experts 


Leon is a freelance web 
developer and trainer who 
assists web developers in 
creating efficient code for 
projects. This issue he 
recreates a host of 
techniques as inspired by 
the top-class sites seen in 
Lightbox. Page 14 


Richard Mattka 


Richard is an award-winning 
interactive technologist on 
experiences for Wonder 
Woman, Independence Day 
Resurgence, Google, and 
Sony. This issue he explores 
WebGL 3D with Threejs and 
_ reveals insider tips for 

_ beautiful results. Page 66 


Luke Harrison 


Luke is a web developer 
from Sheffield, UK who is all 
about scalable and efficient 
frontend architecture. In this 
issue, he explores how to 
create a simple, usable 
modal component in React, 
leveraging its portal 
functionality. Page 60 
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Your First 
Software 
Developer 
Job ~— 


Far more than just 
a Coding Bootcamp. 


I 
We’ll secure you a career. ORTH 
ww w.northcoders.com/web-designer CODERS 
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Cutting-edge features, techniques and inspiration for web creatives 


Chat with the team and other readers and discuss the latest tech, trends and techniques. Here's how to stay in touch... 
steve. jenkins@futurenet.com e @WebDesignerMag e www.creativeblog.com 


Choosing the right framework 
Angular? React? Vuejs? Which is the right one 
for your project? Web Designer finds out more 


Webkit: The best must-try 
resources out there 

Discover the libraries and frameworks that 
will make your site a better place to visit 


Cloud hosting or 

shared hosting? 

Neal Thoms from Fasthosts talks you through 
the pros and cons of both options 


Lightbox 
A showcase of inspirational sites and the 
techniques used to create them 


Second Seasons 
PopCorn 66 reveal how they followed their 
original retro TV project with a successful sequel 


Discovering design 
Describing themselves as explorers, FX Digital 
create engaging and exciting experiences 


WebGL 3D and ThreeJS 


Learn how to create impressive realistic 3D 
scenes that will work in the browser 


Say hello to JSX 


JSX syntax offers a powerful way to author 
re-usable React components. Find out more 


Hosting listings 
An extensive list of web hosting companies. 
Pick the perfect host for your needs 


Course listings 
Want to start learning online? Check out 


wz 


what courses are out there with this list 


Next month WebGL 3D and ThreeJS Say hello to JSX 


What’s in the next issue of Web Designer? Create realistic 3D for the browser How to build with React and the JS extension 
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Visit the WEB DESIGNER onlineshopat | 
myfavouritemagazines 


myfavouritemagazines.co.uk 
Get the latest must-have resources and videos for the latest issue back issues and specials 


¢/9 minutes of Beginners JavaScript e 
Tutorials 


video guides from StudioWeb 
¢14 pink Photoshop filters 
¢10 wooden picture frame mockups 
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Never miss 
an issue 


Subscribe 


Turn to page 32 now 


Save on the cover price and get 
the mag delivered to your door 


Create a fun photo app 
Combine the power of facial recognition and a webcam 
to build an app using clmtrackr and the p5,js library 


Add animated particles 
Learn the basics of the particle.js library to help 
animate your landing pages 


Build a modal component 
Learn how to create a simple, usable modal component 
leveraging the power of React’s portal functionality 


Web Workshop 


= Code a wobbly text effect 


co gi. ; patrickheng.com 

a risa feta: Add multiple layers of animated text 

would seem to Nave a Create a running water effect 

major advantage - cost | en.collee.com 

COMMENT — Neal Thoms — p11 ue i Introduce simple water effects with JavaScript 
Say hello to JSX 


Learn how to build components with React and the 
JavaScript extension JSX 


5 new CSS properties 


Find out what they do and how to put them to 
practical use in your projects 


| i aan : Code dynamic backgrounds 
34 s84ED _ 14 — Programmatically generate images for backgrounds 
ProFile: F'X Digital Lightbox: Guccy 5518 and masks with the new CSS Paint API 


Creating exciting experiences Adding a touch of style to design 
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Header 


The tools, trends and news to 
inspire your web projects 


Choosing the right 
framework 


Selecting the right tool is essential for success. Web Designer 
takes a closer look at which JS framework you should be using 


hen it comes to 
frameworks there are a 
myriad of choices with 
new ones appearing all 
the time, adding confusion to which one to 
use. Indeed, frameworks are appearing at 
such a rate that designers and developers 
simply don't have time to learn the intricate 
workings of the newest addition. 

One answer is to ignore the vast majority 
of frameworks and concentrate on what 
works best for your needs. This sounds 
simple, but choosing, learning and 
familiarising yourself with a major 
framework isn't as easy as it seems. It 
wasnt that long ago that jQuery was the 
JavaScript library that every budding 
developer had to learn. But fast forward to 
today and vanilla JavaScript and a few 
major frameworks are at the forefront of 
web development. 

Whatever project you are working on, it 
is important that you choose the right tools. 
You or your company may sit in the 


0 -~~ 


fe a 
— 


CREATIVE BLOO 


creativeblog.com 


Angular camp, but what if this isn't the best 
tool for the job, or there's a new framework 
that might be a better fit? For newcomers 
to web development, choosing the right 
one can be a daunting task. For seasoned 
developers, it might be time to learn 
something new. The big question is: how 
do you decide? 


most popular JavaScript frameworks 
available today.’ [he paper goes on to Say: 
“By the end of this document, you should 
have the knowledge you need to 
confidently select a tool and get started 
building that next great application’. 

Like all good research, the paper reveals 
the criteria on which it is based. It looks at 


66 Vanilla JavaScript and a few 
major frameworks are at the 
forefront of web development 


A recent Whitepaper from Progress, 
“Choosing the Right JavaScript Framework 
for Your Next Web Application”, should help 
point you in the right direction. The paper 
chooses three major contenders in the 
Shape of Angular, React and Vue js, and 
States that its goal is “to help you match 
your current needs and context against the 
Capabilities, strengths and limitations of the 


In-depth tutorials, 
expert tips, 
cutting-edge 
features, industry 
interviews, 
inspiration and 
opinion. Make 
sure to get your 
daily dose of 
creativity, design 
and development. 


news 


popularity, support, performance factors, 
ecosystem, beyond-the-browser options, 
IDE and tooling support, companion and 
CLI tools, licensing, security, and talent pool 
and resources. The last one being an 
interesting choice. It looks at how easy it is 
to hire developers (which indicates how 
well used a framework is) and how easy it is 
to learn. See the report at bit.ly/2GA9AYN. 


WEB DESIGNER 
Digital Edition 


Do you want to get your hands on 
a digital edition of your favourite 
web design magazine? Head to 
your preferred app store — Google 
Play (bit.ly/2wetvGp) or iTunes 
(apple.co/2igtBYq) — then 
download, install and purchase the 
issue of choice from within the app. 


ROBLEMS 


STAT 
ATTACK 
FACEBOOK 


Have its recent 
indiscretions had 
an impact? 


Worldwide 


69../. 


Down 6% on the 
previous month 


Europe 


/1,.53 


Staying very much 
the same 


North Ameri 


64,7 


Down almost 14% on 
the previous month 


Africa 


/D.4 


Down 3% on the 
previous month 


/6.12 


Up nearly 1% on the 
previous month 


Source: gs.statcountercom 
(correct as of March 20718) 


Header 
Inspiration 


Sites of the month 


SOUND EFFECTS 


01. Kontrapunkt 


bit.ly/2DDrTFQ 
A font that resounds to sound. Play onsite 


to see how it works. 


Designing a cancer institute from O2. Webflow Ecommerce 


the ground u 
f P webflow.com/ecommerce 
Animations abound. Scroll down to see 


the magic unfold. 


O3. Playground 


bit.ly/2GuCdlIR 
Discover the delights of 3D in this 


interactive game. 


04. Oncode Institute 


momkai.com 
Transition animations with a touch of 


the out there. 


e e 
Graphics Colour picker Typesetter WordPress 
Gibberish Worlds 6 Cool Kids Zesta StuffPost 
bit.ly/2GRjRie bit.ly/2H3aAl5 bit.ly/2H5dJAX bit.ly/2uE9rOd 
Collection of surreal illustrations from the | Zesta is a family of high-contrast serif fonts, A strong contemporary WordPress theme 
very talented hand of Ori Toor. — intended for use in display typography. that’s perfect for news-led sites. 
ss ABCabc 
#E2A1C8 4 A /- 


Everyehitig we think about the poditic al 


oe yaw ® Correct MEREMEANY i og 
SS" (1234567) 


| #186385 
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Discover the must-try resources that 
Will make your site a better place 


logomaster.ai 


You need a logo? 


Try logomaster.ai . the lo 


=e ee — sarmtoecie = 
— ee a = 
‘iL soo LUIS, PIU asl ta 


TRY ME ® 


Or starts with our 100+ beautiful templates 


Logomaster 


logomaster.ai 

Need a logo fast? Then this neat tool isa 
quick option for getting a business card 
built in minutes. Kick off by adding your 


company name and hitting the Try Me Checkbot Duotone CSS Gradient 

button. Then it’s a quick step process of checkbot.io duotone.shapefactory.co cssgradient.io 

selecting a category, logo style, colour, This is a browser extension that checks Need to create complementary dutones Need a code for the perfect CSS 
slogan and fine-tuning to get the final for broken links, duplicate titles, redirect in double-quick time. Upload an image, gradient? Check out this tool for the 
result. When finished save for further chains, invalid HTML/JS/CSS and more. choose two colours (or pick from preset answer. Decide size, colour, type, angle 
editing or buy to keep. Plus, it can boost your SEO. options) and download. and copy the generated code. 


TOP 5 Web conferences - June 2018 


Get yourself a seat at the biggest and best conferences coming your way soon 


Kerning UX Scotland CSS Day AnEventApart | Webinale 


2018.kerning.it uxscotland.net/2018 cssday.nl/2018 bit.ly/2D7OLAt webinale.de/en 

A two-day conference (with two A hands-on, practical UX & Head to Amsterdam for two days | A host of well-known speakers A five-day event in Berlin aimed 
days of workshops) in Italy and design conference where of CSS and UX insight from focusing on digital design, UX, at digital professionals, 
dedicated solely totypography | participants can connect and leading experts, including Vitaly | content, code, and much more trendsetters and web makers 
and web typography. learn from their peers. Friedman and Sara Soueidan. for three days. with over 70 speakers. 
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Header 
Comment 


Cloud hosting or 
Shared hosting? 


Pay more, pay less, but which option offers the best for your business 


o have a live website on the internet, you're going to need web hosting, but of the 
two most common hosting choices today - cloud hosting and shared hosting 

- which one is the best for your business? So, what’s the difference? Put simply, 
cloud hosting is a service that is dedicated to you, while shared hosting means that 
you have to share the server resources with other users. 

At first glance, shared hosting would seem to have a major advantage - cost. But the downside is 
that it may have limitations that become more apparent as time goes by and requirements grow. 
Think of it like sharing a flat with several other people. You may save money by pooling resources, 
but sometimes you want the place to yourself. That’s when cloud hosting comes into its own. 

With several customers sharing one set of physical hardware, individual users can't always rely on 
a guaranteed level of server performance. This might not be an issue for some sites, but when it 
comes to running intensive, business-critical processes, many users find that shared hosting facilities 
can cramp their style. Ninety-nine per cent of the time this is fine; but what happens when you're 
Sharing your space with sites that have a spike in demand at a certain time of day or night, or even at 
certain times of the week or year? Will your website functionality suffer as a result? 

The server only has a finite amount of resources to parcel out, so applications will regularly 
struggle to get what they need. The end result could be inconsistent performance, slow loading 
times and a frustrating experience for your customer. If your website is a major source of sales or 
new business enquiries, this could be a problem. What if you're the one drawing down more 
resources than everyone else? Then your host may send you a warning notice or two and ultimately 
even suspend your account. Another issue might be if you need a dedicated IP address. You might 
want this if you need to maintain a secure site via an SSL certificate or if you need to access your 
website via FTP on a regular basis. In both these cases, you'll want a dedicated server. 

Or do you need server root access so that you can edit all the files on your server (including 
the mission-critical ones), install your own software and applications or change the system 
configuration? If the answer is yes, then you'll need access to the server, something you wont 
have with shared hosting. 

With cloud hosting, every single resource you configure is dedicated to you alone. Cloud hosting 


Neal Thoms companies provide virtualised resources on an on-demand, as-needed basis. Instead of paying 
Content Editor upfront for a fixed configuration on a single server, the user can pay as they go for what they actually 
fasthosts.co.uk use. With cloud hosting, the load can also be balanced across a number of different servers, 


meaning that if an individual server goes down, there is no lost information or downtime for the 


SSS] customer. In this way, cloud hosting can be much more flexible and resilient to the fluctuating 
demands of business. To think about it another way, cloud hosting can be a kind of ‘dedicated 
hosting option for users who want the increased power of their own server, but dont want to have 


to deal with the day-to-day issue of server management - checking the status of the server and 


66 shared. hosting would apps, monitoring for any new or recurring issues and so on. Cloud hosting also eliminates the need 
SeCCTYT) tO have ad ma] OF to ever migrate your server in the future when it inevitably reaches end-of-life, a pain all web 


designers can relate to! 


advantage _ COST. But the Cloud hosting is a great option for many people, but maybe you still feel it's too much of a new 
‘é! 1 qd 1 th t it and untried concept to risk putting your business on? This is simply untrue. While the term ‘cloud 
OWTIS1 Cc IS a I IT1lay hosting might be relatively new in the web hosting world, it is built on established and tested 
have limitations that technologies like virtualisation, so it is more mature than you might think. 
lf your business is already heavily invested in the cloud - for example you use Dropbox, Google 


become More apparent Drive, Amazon Web Services, Salesforce, Office 365, etc. - then you already know many of the 
aS time g0es by $9 benefits of cloud hosting. Providing you can see a benefit from the additional value that cloud 


hosting delivers over shared hosting (greater resilience, reliability, scalability, future-proofing, etc.), 
then the additional cost of cloud hosting may be a no-brainer for you. 
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webkit 


@ Gatsby ococs twromat riucins reatures 8106 


Blazing-fast static 
site generator for 
React 


| 
| Get Started > 


7 


Modern web tech without the 
headache 


Bring your own data 


Gatsby's rich data plugin ecosystem lets you build 
sites with the data you want — from one or many 
sources: Pull data from headless CMSs, SaaS 
services, APls, databases, your file system & more 
directly into your pages using GraphQl (9. 


Enjoy the power of the latest web technologies - 
React.js GP, Webpack @) modern JavaScript and 
CSS and more — all setup and waiting for you to 


1 Dwiloing 


GatsbyJS 


gatsbyjs.org 

Gatsby is a blazing-fast static site 
generator for React. So what does it 
have to offer? A static PWA (Progressive 
Web App) generator, it builds sites fast 
using the power of the latest web 
technologies - React.js, Webpack, 
modern JavaScript and CSS, and more. 
And it enables you to pullin data froma 
host of sources using GraphQL. 


DRAGON DROP 


D 


ALcEmaiiie diag and cep list meen plier 


Q 


Pigment 

bit.ly/2ImNyF4 

Explore colour combinations via the use 
of pigment and lighting. A grid of colour 
combos can be tweaked and seen 
fullscreen and copied. 


Dragon Drop 
bit.ly/2qO7maqc 


complex options. 


TOP 5 Codepens 


Head over to the code playground and get inspiration for your projects 


ae 


~.© 


Transforming 
Nutrition Facts 


bit.ly/2H36Y2i 

Who would have thought that 
labels could be so interesting. 
This codepen demonstrates 
how to reformat information for 


3D Hex Mosaic 


bit.ly/2q3Dfyr 

A large image is overlaid with a 
maze of hexagons that move in 
the direction of the cursor and 
reveal more on hover. 


Airplane Toggle 
bit.ly/2Eep2Ue 

Toggle switches with added 
character can say so much in 
such a small space. This is a 
great example of the art. 


demonstrate 


different shapes and sizes. 
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Dragon Drop is a drag-and-drop list 
reorder plugin. It offers straightforward 
reordering of list items plus more 


Sausage Factory 
bit.ly/2ZH405vV 
The power of ThreeJs is keenly 


shaders in what looks like a 
giant sausage factory. 


Discover the must-try resources that 
Will make your site a better place 


GQSeacveos CO GG w 


Used by 


Me ' = - — rs 
abric =, segment » Formidable 


Scale to the entire internet 


Gatsby,js is Internet Scale. Forget complicated 
deploys with databases and servers and their 
expensive, time-consuming setup costs, 
maintenance, and scaling fears. Gatsby,js builds 


our site as “static” files which can be deployed 


{’ Majestic 


Majestic 
bit.ly/2EeasMF 

Testing with Jest? This app provides a UI 
for running tests with Jest. Features 
include support for Create-React-App 
out of the box. 


The Big Bang 
bit.ly/2H1rWyx 

GPGPU particles using texture 
caches for position and 
velocity. Take a look - it looks 
even better in action. 
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Create an animated 
bird box with HTML5 & CSS 


LightBox 


ENTER THE WORLD EXPOSITION 


An animated effect of flying birds that can be used to decorate your website content 


1. Initiate document 
The first step is to initiate the page document. This 
consists of the HTML container, responsible for storing 
the head and body sections. While the head section is 
used to load the external CSS and JavaScript resources, 
the body section is used to store visible content elements 
created in later steps. 

<!DOCTYPE html> 

<html> 

<head> 

<title>Birds Animation</title> 

<link rel="stylesheet” type="text/css” 

href="styles.css” /> 

<script src="code.js"></script> 

</head> 

<body> 

*kk STEP 2 HERE 

</body> 

</html> 


2. Picture container 
The animation is to be placed inside an article container 
that will use the data-picture’ attribute. Use of a container 
provides better flexibility to control the animation from 
CSS and JavaScript. It also makes sure that animation 
elements can be kept separate from other web page 
content to avoid potential problems. 

<article data-picture> 
</article> 


3. CSS initiation 


With the HTML now complete, you should create a new 
file called ‘styles.css. This step sets the page document 
and its body to have no visible border spacing. The page 
will appear with a black background, while the default 
colour for content to inherit is set to appear as white. 
html, body{ 
background: #0QQ; 
padding: Q; 
margin: Q; 
color: #fff; 
} 


4. Picture container and children 
The container is set to a specific size using fixed 
positioning. The fixed positioning guarantees that the 
animation is always visible regardless of scroll position; 
change this to ‘absolute’ if you want it to scroll with the 
content. An animation called ‘move is applied to repeat 
with a duration of 20 seconds. All child elements are set 
to display as block elements using absolute positioning. 


[data-picture] 

ie 
position: fixed; 
width: 10cm; 
height: 2.5cm; 
animation: move 20s infinite; 

} 

[data-picture] > * 

{ 
position: absolute; 
display: block; 

} 


5. Animation definition 
The ‘move’ animation applied in the previous step defines 
attribute states to transition between at key parts of the 
animation. This example brings the animation with 
container positioned out of view, transitioning into view 
at 30% of the way through the animation. The final frame, 
at 100%, moves the picture container out of view. 
@keyframes move { 
O%{ left: -10cm; top: @; opacity: Q@;} 
30%{ top: 50%; opacity: 1;} 
100%{ left: 10@vw; top:@; opacity: Q;} 
} 


6. Bird creation window load 
The bird HTML is generated by JavaScript - keeping the 
HTML simple and allowing an opportunity to increase the 


bird count without requirements for extra code or 
content. This can only be done when the page has fully 
loaded, hence the code being inside a function that is 
triggered in response to the window load event. 


A i 


y 


window. addEventListener("load”, function() 
{ 
*xkxk STEP 8 HERE 


3); 
7. Bird HTML 


The bird HTML is created from the JavaScript through a 
loop that counts from zero to the target amount defined 
by the ‘birds’ variable. A random size and coordinate is 
also selected for each bird before it is added to the HTML 
content string. 
var html = ""; 
var birds = 30; 
for(var i=0; i<birds; itt+){ 
var size = Math.random()*1.5; 
var x = Math.random()*100; 
var y = Math.random()*100; 
html += "<span style='font- 
size: "+sizet"em: left: "+x+"%: 
top: "+y+"%; '>&gt;</span>" } 


8. HTML to target 


The final requirement of the JavaScript is to send the 
generated HTML to any page element using the 
data-picture’ attribute. The querySelectorAll is used 
to get a list of all of these elements so that the generated 
HTML can be applied to them through their 
innerHTML attribute. 
var nodes = document. 
querySelectorAll("[data-picture]”); 
for(var i=; i<nodes.length; i++){ 
nodesLi].innerHTML = html; 


lightbox 17 


Designer: 
The Mads https://themads.agency The Mads hitps://themads.agency 


Film Festival 4» 


Show project 


lightbox 


Russian digital creatives The Mads Agency present a portfolio 
site that blends clean minimalism with bold project previews | 


lightbox 


LightBox 


Colours 


| 
| 


#00759D #B8335E 


FEOBEBE #564D5/ 


Tools 
JQuery, GSAP. 


Bitrix (CMS), 
AJAX Libraries API 


Fonts 


abcABC 
1244567890 
abcABC 
1234567890 
abcABC 
1234567890 


The Gotham Pro family is 
used across project titles 
and links in Regular, Light, 
[talic and Bold typefaces. 


19 


Mads on UX Design & 
Technology 


o1 / 04 —————— « > 


Above 
Opening to a splash screen flooded with negative space, the site adds subtle GSAP animations to distinctive red line drawings 


Noch caeKero 
Mae 


Above 


Above 
Employing a fullscreen timed carousel, three featured projects On every device, selected projects are detailed via key 
transition in sequence inviting visitors to click through and view information, links to view and full-length screenshots 


20 lightbox 


LightBox 
The Mads 


Learn how to create an 
animated cursive writing effect 


A visually animated text effect to present your messages in the style of traditional calligraphy 


1. Define the HTML document 
The first step is to define the HTML document. This 
consists of the HTML container, which is used to 
store the head and body sections. While the head section 
is used to load the external JavaScript, the body section 
is used to store page content elements created in the 
next step. 

<!DOCTYPE html> 

<html> 

<head> 

<title>Cursive Writing Effect</title> 

<script src="code.js” type="text/ 

javascript"></script> 

</head> 

<body> 

*kk STEP 2 HERE 

</body> 

</html> 


2. Drawing canvas 

The writing effect is dependent on the use of pixe 
manipulation, meaning the best tool for the job is the 
canvas element. This provides access to more specific 
tools for drawing effects than available from regular 
DOM elements styled with CSS. The canvas is set to a 
specific width and height - allowing it to act like an inline 
image element. 

B <canvas width=”"800” height="150"></canvas> 


3. Canvas reference after load 
Create a new file called ‘code js. This first step of 
JavaScript waits for the page to complete loading; then it 
will search for the page canvas and to get a 2D drawing 
referent. This is stored as the ‘ctx’ reference name - to be 
used for drawing operations in the upcoming steps. 
window. addEventListener("load", function() 
if 
var ctx = document. 
querySelector("canvas”).getContext("2d”) ; 
*k* STEP 4 HERE 
ios 


4. Variable definitions 
Several variables are defined to control the output 
presentation. While ‘brushWicth’ ‘brushOffset’ and speed 
are used for calculations relating to the drawing effect, 
‘txt is used to define what text is to be drawn to the 
canvas. The x variable is used to control the horizontal 
drawing position - set to start at 30 pixels. 
var brushWidth = 200; 

var brushOffset = brushWidth; 


var speed = 7; 

var txt = "Opportunities multiply when 
seized.”; 

var xX = 30, i = Q; 

*kk STEP 5 HERE 


5. Drawing settings 
Settings for the ‘ctx’ drawing reference defined in step 3 
are applied, defining the font to use, outline width and 
inner colour to apply within the text - set to black. You 
should take note how these properties accept the same 
type of values used for their CSS counterparts for font 
and colour definitions 

ctx.font = "lcm cursive”; 

ctx. lineWidth = 3; 

ctx. fillStyle = "#000"; 

kkk STEP 7 HERE 


6. Drawing function 

A function called ‘draw’ is immediately executed to initiate 
the drawing effect of the text. Firstly, the space is cleared 
for a clean drawing display. Calculations are used with the 
drawing reference ‘draw’ part of the text - like a brush 
stroke. The i’ and ‘x’ variables refer to the current letter 
and its position to present as partially drawn. 


(function draw() { 
ctx.clearRect(x, @, 800, 150); 
ctx.setLineDash(LbrushWidth - 

brushOffset, brushOffset - speed]); 
brushOffset -= speed; 
ctx.strokeText(txtLi], x, 70); 
xxx STEP 7 HERE 

DO) 


’ 


7. Drawing recall 

While the current letter has not yet completed drawing, 

the same ‘draw’ animation is recalled. When the letter has 

been completed, some of the settings for the next letter 

in the text are identified before the ‘draw’ animation is 

recalled, if the end of the text has not yet been reached. 
if (brushOffset > Q) 
requestAnimationFrame (draw) ; 


else { 

brushOffset = brushWidth; 

x += ctx.measureText(txtLitt+]).width + 
ctx. lineWidth * Math.random() ; 

if (i < txt.length) 
requestAnimationFrame (draw) ; 


I 
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Create a slide out menu 


A slide out menu allows you to make full use of screen space for user navigation 


1. Document initiation 
The first step is to define the page document. This 
consists of a HTML container representing the webpage, 
which contains the head and body section. While the 
head section is used to load the external CSS and 
JavaScript resources, the body section is used to store 
the visible page content created in step 2 

<!DOCTYPE html> 

<html> 

<head> 

<title>Slide Out Menu</title> 

<link rel="stylesheet” type="text/css” 

media="screen” href="styles.css”/> 

<script src="code.js"></script> 

</head> 

<body> 

*kk STEP 2 HERE 

</body> 

</html> 


2. Page content 
The page content consists of a heading title, along with a 
navigation container. This navigation stores a series of 
links and has been assigned a ‘data-action’ attribute. It 
is this attribute that will be used by the JavaScript and 
CSS to apply styling and functionality to the container 
and its elements. 
<h1>Slide Out Menu</h1> 
<nav data-action="expand”> 
<span>&#9776 ; </span> 
<a href="#">Page 1</a> 
<a href="#">Page 2</a> 
<a href="#">Page 3</a> 
</nav> 


3. CSS initiation 


The HTML is now complete, so create a new file called 
‘styles.css' to initiate the presentation formatting. This 
step sets the HTML document and its body to have no 
visible border spacing, along with a black background. 
Colour is set to white as the default colour for content 
text to inherit. 
html, bodyf{ 

display: block; 

width: 100%; 

height: 100%; 

background: #0QQ; 

color: #fff; } 


4. Navigation setup 


The navigation is to display with fixed positioning and 
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with a z-index above everything so that it can appear to 
cover the full screen regardless of where the user has 
scrolled to. It is initially positioned out of view on the 
left side of the screen's visible viewport. A transition rule 
is applied to animate any changes over a duration of 
one second. 
nav{ 

display: block; 

position: fixed; 

box-sizing: border-box; 


top: Q; 

left: -100vw; 

z-index: 9999; 

padding: .5em lem .5em len; ; 


width: 10Qvww; 

height: 10vh; 
text-align: center; 
background: red; 
transition: all 1s; } 


5. Nav open and icon 
The navigation’s left position is set to zero when an 
‘open’ class has been applied, triggering the animated 
transition defined in the previous step. The navigation’s 
first child is the expand icon, which uses fixed positioning 
to always remain visible in the centre of the left side of 
the screen. 
nav .open{ 
left: Q; 
i; 
nav *:first-child{ 
position: fixed; 
padding: lem; 


cursor: pointer; 
left: Q; 

top: 5@vh; 
clear: both; } 


6. Navigation links 
Each anchor link inside of the navigation container is set 
to be four times the size of the default text. Their colour is 
set to black, with a margin applied at their top to 
guarantee vertical spacing is visible. Setting their display 
as ‘block’ makes each link automatically appear to be 
Stacked vertically. 
nav a{ 

display: block; 

font-size: 4em; 

color: #000; 

font-family: arial; 

text-decoration: none; 

margin-top: .2em; 


I 


7. JavaScript listener 
Create a new file called ‘code js. This step waits until the 
page has loaded, upon which it searches for the first child 
of all navigations with the data-action’ attribute set to 
expand. This first child, being the open icon, has a ‘click 
event listener applied, upon which toggles the element to 
have or not have an ‘open’ class applied. 
window. addEventListener("load” , function(){ 
var nodes = document. 
querySelectorAll('nav[data-action="expand” ] 
A fLPSst-child”) 
for(var i=@; i<nodes.length; i++){ 
nodes[i].addEventListener("click”, functi 
on(){ 
if(this.parentNode.className == "open”) 
this.parentNode.className = "”; 
else this.parentNode.className = "open”; 
1p) 
} 
Ds 
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They say any sequel to a successful story is the toughest act to follow, SO stay 
ran with retro TV to land repeat glory online 


tuned for how PopCorn 66 re- 
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MAKE NO BONES ABOUT IT, this age of 
the on-demand boxset has marked an 
incredible resurgence for television online. 
The hunger for high production, episodic 
and yes, blockbusting shows rivals the 
cinema box-office given the flexibility of 
consumption for viewers. Of course the 
beauty of this is the catchup element too, 
where a growing archive of old TV classics 
can be found and enjoyed in entirety by 
those who missed them first time around. 
To appreciate best our featured web 
masterpiece this month, this kind of 
‘homework’ would indeed be 
recommended. This is because PopCorn 


POPCORN TV 
Www.popcorntv.fr 


POPCORN 66 


Www.popcorne6s fr 
@PopCorn66_FR 


TV, an in-house project for digital studio 
PopCorn 66, is a veritable dream for telly 
addicts. Based in Paris, France the agency 
specialises in creating rich digital 
experiences routed in pop culture 
references with PopCorn TV building ona 
previous outing to pack your browser full 
of them - literally. With nods to the ‘hidden 
object’ games popular on mobile devices, 
the website follows on from the movie- 
themed PopCorn Garage from 2015 to 
deliver an engaging digital quiz bursting 
with clues to iconic small-screen smashes. 
“PopCorn TV is the result of another 
project that we created two years ago, 
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named PopCorn Garage (www. 
popcorngarage.com),” begins Romain 
Zitouni, Partner and Art Director at 
PopCorn 66. “This project was already 
challenging the internet on cinema culture 
with 66 hidden references in a garage. 
Since its release, it has been a huge 
success with more than 1.4 million players 
worldwide. Without the success of 
PopCorn Garage, PopCorn TV would not 
exist.” A scary thought indeed, so after 
spotting this impressive follow-up for 
ourselves in issue 273’s Lightbox we leapt 
from our sofas to hear from its makers on 
how the production came to light. 
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DIFFERENT STROKES 


“After PopCorn Garage, we received a lot 
of messages from players around the 
world asking us to do a sequel,” reveals 
PopCorn 66 partner and Creative 
Developer Priska, when asked how the 
story started. “So we took the time to 
think carefully before embarking ona 
second version.” Clearly aware of doing 
justice to the impact PopCorn Garage 
had made on web audiences, makers 
PopCorn 66 didn’t want to simply rush 
any follow-up. The new project would of 
course also be an in-house promotional 
effort, not commanding any kind of 
direct commercial incentive or support 
so scheduling was an issue too. 
“PopCorn Garage and TV are proactive 
projects without any funding so it was 
therefore necessary to get organised 
enough to unlock the time to work on it.” 
But the passion certainly remained, with 
Priska confirming the studio’s constant 
fascination and inspiration around pop 
culture. But this time would be a chance 
to “explore another universe’ within this, 
demanding a new theme, new décor and 
therefore a brand-new name too. “We 
also wanted to surprise and challenge 
each other too,’ agrees Romain. “The 
word that characterizes us is ‘PopCorn’ 
and not Garage. So for this second 
version, we didn’t want to remake a new 
Garage and lock ourselves into the 
cinema theme.” Plus the guys would 
have complete free reign to make those 
judgement calls. Apart from their own 
creative pressure and pride, there would 
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be no customer or client to impress. 
Once a Suitably fresh theme was settled 
on, the stage would be set and green-lit 
to go. 


THEMATIC TENSION 


“For the original idea, we must go back 
to the birth of Popcorn Garage,” Romain 
concedes when recalling how the new 
idea came about. “That project started 
froma very simple principle - the 
summarising of a cult film in one object. 
From there, we formulated a set with 
several references to films that had left 
their mark on us. The idea of turning 
these into an interactive game that 
defies all film fans then seemed a pretty 
natural extension. It was then necessary 
to find effective game mechanics for 
making the experience simple and 
addictive.” This was where the team 
pointed towards those hidden object 
discovery games, a kind of Where’s 
Wally for spotting the visual hints and 
metaphors relating to each film. So if the 
mechanic was already in place and 
proven to be popular, it would now be 
about arriving at a pop culture theme 
not a million miles away. “Our first goal 
was to find the right theme,” Priska 
confirms. “So we asked our close friends 
and some players, about 5,000 people 
in total, through a small survey to 
acknowledge their desires. The majority 
answered in favour of the TV series,” 
something PopCorn 66 themselves 
approved of too. “Yeah the TV series was 
a perfect transition from the cinema 
theme,” adds Romain. “The universe of 
the TV series is extremely rich, from the 
50s to nowadays. Now the TV series has 
become more and more creative, to the 
point of rivalling the cinema. Some even 
create a real addiction to the point of 
commanding their own social networks, 
such as Game of Thrones or The 
Walking Dead etc. For us, it was an 
incredible playground to explore.” With 
theme choice made, the focus shifted to 
devising a more sophisticated gaming 
experience while retaining PopCorn 
garage’s simplicity. Here the guys took 
advice from friends Mickael Dauphinot 
and Alban De Fortaleza, founders of the 
agency Le Singe and specialists in Agile 
methodology - helping to organise ideas 
and define priorities. “Here we thought 
about several improvements to satisfy 
all players,” explains Romain. “Creating a 
new 4K visual that could integrate a 
zoom function, an increase in playing 


time by offering mini-quizzes, a more 
immersive approach to sound design 
and the proposition of a world ranking 
to challenge friends with.” 


A UNITED FRONT 


The visual design work would of course 
centre on the creation of a playing field 
that contained 66 TV show references. 
PopCorn Garage quite simply was styled 
as a lockup garage/auto shop, providing 
a sense of place that matched the 
theme. Romain reveals, “PopCorn TV 
had to have its own place that 
corresponds to the universe it inhabits 
so naturally we thought of the television 
metaphor. Where before the gaming 
experience led us to open up a Garage, 
for version two we turn on and off a TV.” 
This concept would throw up front-end 
challenges such as recreating analog TV 
effects, a hurdle that would dictate 
technological choices as Priska 
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confirms: “The only technology that can 
achieve this kind of effect is the WebGL; 
| opted for the very famous library 
Three.js.” “Then the biggest creative 
challenge was to create the game 
scenery in 4K to integrate a zoom 
function,” Romain interjects. “The idea 
was to pace the hallmarks of classic 
sitcom décor, chiefly living room, sofa 
and fridge etc, into a dirty atmosphere 
that remains our graphic signature. 
Once the mood was established, it was 
necessary to choose 66 TV series 
references both recognisable and 
relevant to the location. The gaming 
experience is based on how all the 
references are arranged in the image, 
requiring a balance between the 
immediately identifiable objects and 
those more complicated to find - all 
while keeping a visual coherence that 
maintains overall elegance.” Similarly, 
although 3D technology is used within 
the display PopCorn TV’s front-end 


Below 
Popcorn TV can be 
enjoyed across all screens 
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A uniquely vital element of the 
PopCorn TV project was Inits use 
of music, something that doesn't 

always feature much beyond a 

background loop. The creative 
team in this instance applied high 

production values, befitting the 
classic show references hidden in 
the quiz itself. “The other big 
creative challenge was to create an 
original approach to sound design 
that would reinforce a universe 
steeped very much in nostalgia,” 
explains Creative Designer and Art 
Director on the project, Romain 
Zitouni. “So here we chose the 
synth wave genre, a musical trend 
inspired by the retro sounds and 
electronica of the 1980s. This lead 
to a total of six incredible tracks 
being composed especially for the 
game by the very talented Eric 

‘Elvis’ Simonet.” In fact, fans of 

PopCorn TV will appreciate 
Rormiain's coyness here when 
hinting at the music’s importance 
to the live experience. Eric’s original 
soundtrack is frankly awesome and 
it’s posting on SoundCloud (https:// 
bit.ly/2Gz6v¥1) encourages 
enjoyment in its own right. 

Reminiscent of Cliff Martinez’s 

soundtrack for the 2011 motion 

picture Drive, the synth-heavy 
score is even joined by PopCorn 
TV's own neon pink logo to lend the 
site a famitiar ‘cult’ vibe from the 
outset. “Like every cult series, 
PopCorn TV had to have its own 
credits,” beams developer Priska. 
“So we created a four-minute trailer 
from different series extracts 
accompanied by the track Growing 

Strong, custem created by Eric, 
requiring hours of editing. But the 
credits immediately introduce the 
site and doa great job of putting 

the player in the maod.” 
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One of the many interesting things surrounding “The PopCorn Garage project really started the traditional client and agency paradigm to 
this unique project is the role it has played in from a common desire to collaborate together,” stay true to the original vision while crystallising 
reinforcing an artistic partnership. In some Priska explains. “ It was about creating the influences so close to their hearts. “The 
respects the real story behind building both something that belongs to us without the important thing was to strengthen our links with 
PopCorn experiences has been about involvement of an agency or customer, a fan Priska and underline the point of how we 
establishing PopCorn 66 as a studio. Very much project made by fans for other fans.” Indeed, the complement each other,’ explained Romain. “So 
a product of a creative meeting of minds whole mission statement for where the pair we naturally decided to form the studio 
between founders Romain Zitouni and Priska, wants to reside thematically with its work was PopCorn 66 out of the shared ambition to work 
the partnership has gone from strength to very much set then and there. Following up with on creative projects around pop culture by 
strength during production of both websites. PopCorn TV, the approach remained different to bringing our expertise together.” 
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visuals (the game world) is of course 2D. 
What this meant was that any actions 
from the player on the visuals such as 
instigating the zoom or pan effects also 
proved to be puzzling in terms of 
development. “I had to review my 
trigonometry course to accomplish this 
task,” laughs Priska. 


MOBILE MOANS 


Allin all, the project would end up 
commanding a lot of assets that would 
also complicate the back-end side of 
development. The game ended up 
including 99 TV references to find, 114 
with bonuses, and involving over 7OO 
quiz questions with 300 or so Blind Test 
sounds. This is where friend Vivien 
Ripoche stepped in to offer some 
developer expertise, assisting in the 
build of a PHP and MySQL backend 
capable of managing the game data and 
services being served to the front-end. 
Within this, Priska recalls that a 
particular headache was caused by the 
method used by players to submit their 
guesses. “One of the biggest coding 
challenges was creating an input text 
recognition algorithm. The gaming 
experience is based on typing in the 
correct series title, so it was therefore 
necessary to create an intelligent 
algorithm that does not penalise players 
for typos or spelling errors. It would also 
need to be smart enough not to 
consider an answer as valid if its spelling 
was similar to a correct answer within 
the visual, but still not technically right.” 
This tricky balance to strike was echoed 
in the conundrum faced by so many 
these days for creating ambitious digital 
experiences suitable for multiple 
platforms. “We also wanted a site 
accessible on all devices including 
mobile,” stresses Romain. “Another big 
challenge was to create a game available 
on the maximum number of platforms.” 
“Since WebGL is not compatible 
everywhere, we had to create two 
games in one,” Priska adds. “A ‘full’ 
version in WebGL with full-screen video 
and a version without WebGL used 
especially for tablets and phones, so it’s 
a lot of work.” 


LIVE SCREENING 


At the launch of PopCorn Garage, the 
site very quickly ran into a server 
problem due to the massive, largely 
unexpected, traffic. Fast-forward 18 


months and PopCorn 66 were 
determined not to make the same 
mistakes. “The release of a project like 
PopCorn TV presents several problems,” 
concedes Priska. “On launch day the site 
must actually be able to handle the load, 
but there are also all the unexpected 
bugs to manage. So to mitigate this, we 
created a group on our Facebook page 
where players could explain any 
problems encountered. We spent hours 
after the launch to settle everything 
once it went live.” Beyond sucha 
thoughtful commitment to addressing 
such inevitable launch niggles, you 
really get sense talking to the pair that 
they cared and continue to care 
immensely for what they do. After the 
undeniable successes of PopCorn 
Garage, both really felt the pressure 
when it came to unleashing a follow-up 
because of the natural keenness not to 
disappoint expectant players. “Four 
months after going online, the results 
are super positive,” Romain concludes. 
“And we've had a lot of media relays 
around the world while picking 

up Website of the Day on FWA, 
Awwwatrds and CSS Design Awards. 
After appealing to cinema lovers, we’ve 
managed to drive all TV series lovers 
around the world similarly crazy, 
creating a real community through both 
PopCorn projects. This is what we are 
most proud of.” 
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You've got 30 seconds to find the 6 TY senes 
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WITH A FAIR FEW TO CHOOSE FROM, WE QUIZZED POPCORN 
66 PARTNERS PRISKA AND ROMAIN TO LOOK CAREFULLY 
AND PICK OUT A SITE HIGHLIGHT NOT TO BE MISSED 


“Even though players have very well received all the features of 
the game, the Blind Test bonuses (theme music narning) have 
proven to be the real success on PopCorn TV. They really 
brought anew dimension to the experience and were much 
acclaimed on social networks.” 
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your free gift! 
Every issue, delivered straight to your door 


Never miss an issue Delivered to your home Get the biggest savings 
13 issues a year, and you'll be Free delivery of every issue, Get your favourite magazine for 
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What our readers are saying about us... 
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customer service team 
| Call 0344 848 2852 
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This offer will expire on 
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FX Digital describe themselves as explorers. Creating new digital experiences that redefine 
the spaces we all inhabit, their ability to craft engaging and exciting sensations has ensured 
they continue to gain the attention of leading brands looking to connect with their audiences 
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eginning as a hobby in 2010, co-founder 

Matthew Duhig was at The University of 

Southampton when his sister asked him 

if he could create a website for her new 

bridal business. “Although confident that 
| could build the site my design ability was a bit 
limited, so | asked my school friend Tom (Smith) to 
design a logo and layout, Matt explains. “He was, at 
the time, studying Computer Animation at 
Portsmouth and gladly accepted the challenge.’ 

“After completing the design and build my sister 
started recommending us to businesses that she 
would meet on her travels. It wasn't long before we 
had our second gig. We were delighted to be given 
the opportunity to develop a site for another local 
bridal company and were going to be paid £300! 
Anticipating at this early stage that we were going to 
rule the world, we decide to incorporate a company.’ 
Both Matt and Tom continued to build websites as 

a side gig while they finished their studies at 
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Who FX Digital 


What Website Design, Graphic Design, 
WordPress, eCommerce, Video, Web 
Animation, Web Development, SEO, 
Photoshop, WebGL, WebVR, three.js, 
and A-frame 


Where 91- 95 Brick Lane, 
London, E16QL 


Web fxdigital.uk 
Key Clients 
Double Negative 
Prime Resi 
Haviland Productions 
Vikarious Productions 


London Siggraph 
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university. All this took place in local cafés and Matt’s 
family home, kept company by their dogs. 

“After graduation we were both excited about the 
possibility of pursuing our new-found passion on the 
web and wanted to continue to work together, but 
we agreed we could benefit from some real-world 
experience before starting on our agency journey,’ 
Matt explains. “Tom successfully interviewed for a 
job at Double Negative and started as a runner 
looking to follow a career as a VFX artist, while | 
landed a job developing email templates at a digital 
marketing company called eCircle. 

“| had an incredible time at eCircle, as did Tom at 
Double Negative. We both learned a lot from a ton of 
inspirational people, but we just couldnt shake the 
urge to pursue the agency idea. So, we both left 
those jobs and - after a brief period in which | 
worked at a systems company and Tom cycled from 
Norway to Ghana - we started taking the business a 
lot more seriously. Tom and | moved in together in 
Reading to help concentrate our efforts. 

“The growth began and continued quite 
organically, Matt says. “From a bedroom in Reading 
we made our way over to East London and finally 
settled on the Truman Brewery on Brick Lane as a 
place to base the business. Were still in that same 
building today, just in a much larger office space 
than when we started.” 

FX Digital as a name for their company came later, 
initially calling themselves Juicy Webs. Matt explains: 
“We started things up as Juicy Webs, a name 
originally chosen by Tom and | as two excited 
youngsters over a beer in the local pub. For some 
unknown reason we were pretty passionate about 
the name, which over time had become more of a 
hindrance than a help. 

“The name really did have to change if we wanted 
to be taken more seriously as an agency. Cue frantic 
name finding. It's perhaps one of the most difficult 
processes we've ever been through as a business. 
To make matters worse, we had been operating for 
three years before opting to change the name. We 
already knew how we wanted people to feel when 
they saw what we were called, and what we wanted 
it to represent, but we couldnt just pick a word that 
excited us. 

“Being the creative one in the pair, Tom took the 
lead here. We listed hundreds of words and passed 
each one around some friends for feedback, but 
none stuck. Eventually Tom locked himself away 
and started coming up with ideas for a new visual 
identity. Before long he settled on the idea of FX 
Digital. It suited our vision perfectly; combining the 
worlds of VFX and emerging web technologies. It 
also had a rather elusive vibe, not limiting us to 
one medium in the same way Juicy Webs did. 
Inspired by the Penrose triangle the logo was 
created as an impossible shape, representing the 
effect we wanted to develop in our work using 
immersive technologies.’ 

Matt continues: “Finding the domain was easy 
enough. We went ‘cliche agency’ with it and stuck -& 
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‘Weare in front of ‘fx’ to give Us ‘wearefx.co.uk’. Before 
too long we were approached by the owner of 
‘fxdigital.uk’ and opted to purchase this to use as our 
primary domain. We've found that it’s important to 
include your company name in the URL. It’s how 
people identify and recognise you.” 

Having spent what seemed like an eternity 
coming up with a new name for their agency, the 
next step was for the pair was their own website. 
Tom explains their approach: “An agency's site is 
invaluable. Any business's site is really. It’s an 
opportunity to showcase your identity and your 
Skills, but above all, it should be at the forefront of 
your marketing activities - driving leads and acting 
as a resource to help land opportunities. It’s 
essentially your CV. 

“We've been through several iterations with our 
Site and it’s in a good place at the moment. However, 
the quality of the work we produce and what the 
team here is capable of, improves so often that our 
site always looks dated to US. 

“It takes a lot of effort to improve your own 
marketing material as an agency, and you have to be 
really disciplined to make it work. We try to treat it 
like any other project and commit internal resource 
to delivering it. However, more often than not we 
find ourselves making most of the improvements 
over the Christmas break when there's little or no 
client work due.” 

The skills that Matt and Tom brought to their 
business has meant a steady stream of clients. Now 


36 profile 


Always Striving to create an 
engaging fun environment 
to work in. At FX Digrtalits 
always a great day. 


" ta 
p45 | 
ye 7 ‘ 
. | ‘ a ! n 
vo ' 
~_ ¥ 
\ 
\ 


/ 
j 
yf 


“Not only is R&D a great 
collaborative process, but the 
projects we create through it 

give us a unique edge when 
talking with clients and allow 
us to demonstrate our ability 
to jump into new technologies 
and create something 
genuinely new” 


Matthew Duhig, Director and Co-founder 


| 


well established, have they changed how they 
attract new potential work? “Despite the importance 
of having a site that drives leads through the 
business, ours generates us a relatively small 
number of enquiries and always has done,’ says 
Matt. “As disappointing as this is, it’s not really ever 
been a problem for us as each and every lead we 
have ever had has come through a single source: 
word of mouth.’ 

Tom also comments: “Word of mouth is essential 
for the growth of any agency. Were firm believers 
that by placing the utmost importance on the 
delivery of work were giving ourselves the best 
opportunity possible to enhance this. We can 
analyse our clients today and, more often than not, 
track them back to one or two entities or individuals 
that had faith in us when we first started. 

“Despite this, we still insist on pitching for each 
piece of work that we win and have beaten many a 
Goliath to a job because of our performance when 
pitching. Pitching not only gives an agency the 
opportunity to prove just how talented a group of 
people they are, but also provides an opportunity 
for them to thoroughly understand a client, their 
audience, and their proposition before they start 
to work with them.’ 

How agencies pick the clients they work with can 
be manifold. For FX Digital it’s always a personal 
connection with the client or the experiences they 
want creating, as Matt explains: “For the most part 
we select the work we do based on the people we 
meet. Luckily for us - because most of our business 
comes through word of mouth - most of the 
opportunities we find involve working with some 
remarkable and like-minded people. We like to think 
that we have a pretty unique culture here, and 
operate on a mentality of achieving more and 
valuing staff inout. We look for clients that match 
that outlook.” 

Matt goes on to outline the relationship they 
always try to foster with the businesses they work 
with: “It’s important to have a productive working 
relationship with your clients. You need to respect 
their business and they reciprocate by recognising 
the skills you bring to the table. 

“That sort of partnership - and all our projects are 
partnerships - allows us to avoid those situations 
where members of the team are stuck in a meeting 
or on a call for half a day only to make zero progress. 
Everyone understands their input, their value, and 
where were going with what's in front of us - 
including the client. Were in the fortunate position 
to have enough experience behind us to choose 
what we pitch for. And where we spot a gap in our 
knowledge, we leverage our R&D team to fill it by 
creating our own self-initiated work. 

“Early into the development of the agency our 
second hire, Joy Chen (Head of R&D), is an epic 
creative and technical genius who became our 
full-time head of R&D. We wanted to experiment 
with immersive technologies like WebGL, but 
struggled to focus on this on top of fee-generating > 


Discovering Design 


MIiSS!'OW COWTROL a) ytaer 


5S Y 8 Soe 


“At the heart of the Apollo program andiremarkable deéade of 
achievement was the special team who werked in Mission Control.” 


Mission Control 


missioncontrol.movie 


Sittion CoaTaot 


An immersive website to support the 

documentary film release of ‘Mission 
LE Mere Control: The Unsung Heroes of 
Apollo’, made by UK-based production 
company Haviland Digital. 

The objectives were to grow Mission 
Control’s audience by targeting space 
fanatics, build up anticipation for the 
film release, drive users to purchase 
merchandise and the film on the 
iTunes Store, create a rich multimedia 
experience and to give visitors a 
flavour of the film. 

Traffic to the merchandise site has 
dramatically increased since the 
launch and the site continues to drive 
traffic to iTunes, supporting ‘Mission 
Control’ in reaching its #2 spot on the 
US iTunes documentary charts. 


Top Archive footage 
was used as 
background video 
through the site to 
evoke a sense of 
wonder and nostalgia 


Middle The Astronauts 
behind the Apollo 
missions are presented 
on designed pages that 
reinforce the theme 

of the site 


Bottom WebGL 
interactive content was 
created to enable 
visitors to explore 
mission control 
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Census One 


fxdigital.uk/case-study/census-one 


Built as an interactive experience to 
celebrate the release of ‘A Star Wars Story: 
Rogue One’ the internal R&D piece had the 
brief to create a piece of interactive online 
content to celebrate the latest Star Wars 
film release. 

The experience is a 3D model of the word 
‘ONE’ in a Space theme that evokes a real 
cinematic emotion from the audience. 
Content is aggregated from Twitter and 
filtered by the hashtag #RogueOne, with 
each particle of the model representing a 
tweet. The audience can rotate and zoom 
around the model. The experience is paired 
with an audio track to help to further elicit a 
cinematic emotion. 

The result of this project is a stunning 
interactive visual census of what fans have 
to say about the film, as well as showcasing 
what’s possible in today’s browser. Not only 
is the final piece highly engaging and 
interactive, it also provides a way of 
visualising a large set of data in an 
immersive environment. 
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Top A WebGL Particle 
effect was used with 
each individual 
component a tweet. 
Social media never 
looked so good! 


Middle The evocative 
graphics used 
throughout this 
experiment in data 
visualisation, 
aggregates content 
from Twitter to deliver 
an immersive 
experience. 


Bottom FX Design 
flexed their design 
muscles with this R&D 
experiment. Each 
particle of the model 
represents a tweet 
#RogueOne. 


work. AS soon as we had enough capital we hired 
Joy to give us a full-time resource to work on 
internal projects. 

“Not only is R&D a great collaborative process, 
but the projects we create through it gives us a 
unique edge when talking with clients and allow 
us to demonstrate our ability to jump into new 
technologies and create something genuinely new. 
And because we make our own briefs the projects 
are pretty out there, from a WebVR rollercoaster 
Space race game, 3D Globe 
of WWII events, through 
time and particle effects 
galore, if we want to win 
new work in a particular 
field we start with R&D as 
a proof of concept, which 
helps us choose the next 
round of clients.” 

The work that an agency 
produces not only meets 
its clients’ brief, but also 
Speaks volumes about the agency's core drivers and 
the ethos that is embedded in the business. Matt 
outlines which work best reflects who FX Digital are: 
“There are a lot of projects that we're proud of. If you 
asked each member of the FX team you'd get a 
different response. Some would say PrimeResi, a 
project that saw us produce some insanely intricate 
WordPress development. Others would suggest 
Mission Control, a 2D WebGL site that uses PixiJS to 
present an interactive schematic of the Mission 
Control room from the Apollo missions. 


Were always 
experimenting, and our — WebGL. JavaScript, and 
arsenal regularly updates 
to incorporate new 
additions 


“For me the project that best represents what 
we co is Census One. Census One is a WebGL site 
created using the ThreeJS library. It presents a 3D 
particle model of the word ‘ONE’ and individually 
maps tweets with the hashtag #RogueOne to these 
particles by pulling them into the site using the 
Twitter API. The site itself was a product of R&D and 
something we developed internally to showcase 
What's possible with 3D in the browser. Not only did 
it require us to use our skills in design to concept an 
illusive Space environment, 
it also required us to 
develop with modern web 
technologies including 


REST APIs, alongside 
optimising and exporting 
3D assets into browser- 
friendly formats such 

as JSON,’ 

Technology is constantly 
on the move, none more so 
than in the creative environment of the web. Tom 
explains which tools FX favour at the moment: 
“We're always experimenting, and our arsenal 
regularly updates to incorporate new additions. At 
the moment, the design team uses Sketch for 
wireframing and designing digital products and 
Photoshop for image touch-up and manipulation. We 
use InVision for prototyping and early user testing, 
and we are keeping our eye on InVision Studio and 
excited to see how this could evolve our current 
design workflow. 
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Timeline 
2011 


FX Digital incorporates as Juicy 
Webs and begin operating from 
Matt’s family home. 
Employees: 2 


2013 


Outgrowing the family home, Juicy 
Webs moves into a small office in 
the Truman Brewery. 

Employees: 2 


2014 


Juicy Webs change its name to FX 
Digital and welcomes Ben and Joy 
on as its first employees. 
Employees: 4 


2015 


FX Digital outgrows its original 
office and move to a bigger space 
in the Truman Brewery. 
Employees: 5 


2016 

Mission Control and Census One 
websites launched with WebGL 
experiences. 

Employees: 5 

2017 

FX Digital outgrows its office yet 
again and moves to a bigger space 
in the Truman Brewery. Hugely 
successful launch of PrimeResi 
membership website. 
Employees: 7 


2018 


FX Digital moves into the fast lane 
winning a key account. 
Employees: 11 


Agency breakdown 


ti Technical Director 


1 Creative Director 

ti) Research and Development 
Lt Project Manager 

Ej Designers 


4) Developers 
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“From a development perspective we use 
Avocode to reference Sketch files. Avocode gives us 
the ability to pull assets from a file and even gives us 
Suggestions on styling elements as per the design. 
The development team uses Git version control with 
a Git Flow approach, and we use Tower as our Git 
client because it Supports this approach perfectly. 

“We keep all our code in repositories on Bitbucket, 
using their pipelines feature for CI/CD. When it 
comes to coding, we use Sublime with a set of 
packages to extend it to support our workflow. 
Beyond this, each member of the team will theme 
and adjust Sublime to support their needs. We use 
Gulp as a task runner amongst other things to 
compile our SCSS into CSS, and also to lint our code 
to SCSS-Lint and JSHint standards. 

“To bring it all together our project managers 
work from Asana, co-ordinating the team by creating 
projects, while each team member tracks time by 
making use of the Everhour integration. Post-delivery 
we use Done Done as a ticketing system to give our 
clients a point of contact for support requests.” 

Matt outlines how the creative tools FX uses have 
enabled more ground-breaking work to be created: 
“Technologies such as WebGL are enhancing 
JavaScript to bring improved processing capabilities. 
This allows us to provide experiences that were once 
only possible on high-end platforms to the web and 
even mobile. What excites us the most, however, is 
the improving accessibility of these technologies. 

“For example, with a mobile phone and a Google 
Cardboard it’s now possible to experience Virtual 
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Tom Smith, Creative Director and Co-founder 
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Reality through a browser (WebVR), and libraries 
such as A-Frame are making it even easier for 
developers to create content in this form. Not far 
behind WebVR is WebAR (Augmented Reality) 
and were anticipating that to be a huge area for 
development over the next year or so, with the 
more innovative retailers creating their first 
WebAR experiences.” 

FX Digital has grown slowly and organically, 
adding new members of staff as needed. Matt 
explains his approach to hiring and what it takes to 
get a seat at his table: “The people that work with us 
at FX are the single most important part of our 
business. We're lucky enough to have developed a 
friendly and spirited culture that empowers each and 
every one of us to deliver to the best of our ability 
and grow along the way. Among everything else it’s 
important to us that the people we employ have 
absolute passion for the work they do. It makes it so 
much easier to overcome challenges and it ensures 
youre always seeking out the most exciting 
technologies and opportunities. 

“We look for those self-motivated learners. In 
order to work in digital you need to have the 
willingness to constantly educate yourself using any 
means you can, whether that is through speaking 
with others or using resources such as Udemy, Code 
Academy, popular forums or even Google. 

“Next we look for people that understand that 
they're part of something bigger than themselves. At 
FX were a close unit of talented individuals, but the 
whole is definitely greater than the sum of its parts. 
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This is most obvious when we're working together 
to meet a hard deadline or pitching for work across 
the entire team. 

“Lastly, we look for people that don't take 
themselves too seriously and want to have fun while 
working. Fun and humour are important parts of 
what keep Us sane over here, and without it we 
genuinely dont believe the work we produce would 
be half as good as it is.” 

“The future is exciting for us,” Matt concludes. 
“We're becoming recognised for the exceptional 
creative and development work we produce and 
as such the opportunities were being exposed to 
are more interesting than ever. 

“Over the past year we've put in place an 
incredible set of foundations in our creative, 
development, and support operations that will help 
ensure we can grow and achieve even greater 
things in 2018 and beyond. Were always looking to 
hire and hope to add to our team in the near future. 

“We have some pretty great projects that we're 
looking to release soon. Alongside our first television 
application we're also working on virtual reality 
content for the Samsung Gear VR and have an 
incredible moon landing WebGL experience that’s 
due for release imminently. And who knows what 
our R&D team will turn their sights on next.’ 

The trajectory that FX Digital is on means a giddy 
ride for everyone, but is welcomed since it enables 
the agency to push the boundaries of what is 
possible, and even to invent the impossible if it 
doesn't exist. 


FX DIGITAL 


Founders 


Matthew Duhig and Tom Smith 


Year Founded 
2011 


Current Employees 
11 


Location 
London 


Services 
Interactive Website Design 
and Development 


3D (WebGL) Website Design 
and Development 


TV Application Development 
VFX 
Virtual Reality 
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Tools for VR, AR 
and inclusivity 


A-Frame 


aframe.io 

A-Frame is a web framework for building 
Virtual Reality (VR) experiences. Originally 
developed by Mozilla, it is an independent 
open source project. A-Frame is HTML, 
making it simple to get started. 


Microsoft HoloLens 
microsoft.com/en-gb/hololens 


Microsoft’s ‘mixed-reality’ product, 
HoloLens, is the first self-contained, 
holographic computer, enabling you to 
engage with your digital content and 
interact with holograms in the world 
around you. 


Funkify Disability Simulator 
funkify.org 

Funkify is an extension for Chrome that 
helps you experience the web and 
interfaces through the eyes of users with 
different abilities and disabilities. Funkify is 
created by a team of usability and 
accessibility experts in Sweden. 


Stark 


getstark.co 

The colour-blind simulator and contrast 
checker for Sketch. Simulate the various 
forms of colour-blindness by quickly 
previewing your Sketch designs and 
make adjustments as needed. 


UseContrast 


usecontrast.com 

A macOS app that provides access to 
WCAG colour contrast ratios. The entire 
app UI updates instantly when picking 
colours, making it easy to get the colour 
contrast information you need to make 
informed decisions about the colour of 
your text. 


Contrast 
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RealtimeBoard 
Work with team members on 
whiteboards in RealtimeBoard 
to design journey maps, 


personas and other planning 
canvases. As the name 
suggests, you can watch your 
team move objects around the 
whiteboard in real time 


Tools for trust and 
collaboration 


Dark Pattern Library 


darkpatterns.org/ 

Dark Patterns are tricks used in websites 
and apps that make you buy or sign up for 
things that you didn’t mean to. The 
purpose of the Dark Pattern Library site is 
to spread awareness and to document the 
companies that use such techniques. 


Government Research 


Consent Guidelines 
bit.ly/2uhg2fo 


The UK government website contains an 
entire manual on service design and the 
consent forms you need signed to ensure 
you can be trusted with a person’s data 
gathered during user research. 


Figma 

figma.com 

Figma is a browser-based design tool that 
makes it easier for teams to create 
software. Present and prototype in the 
same tool as you design. Version control 
your team designs. 


Float Team Schedule 


float.com 

Float enables you to visualise your team’s 
project assignments, overtime and time off 
in one place. Collaborate on project plans 
and resolve conflicts with real-time 
drag-and-drop scheduling. 


Loopt1 


loopi1.com 
User aioe > SPT... seve | share | Loopil is integrated with JustInMind.com 
eae ae = SPS i f | and is used to create prototypes that can 
then be used to run online usability tests, 
with the results shown in detailed reports 
Choose Your Target Audience dri intéct dideot 


UserTesting Panel 


Tools For coherence 


Axure 

axure.com 

Create simple click-through diagrams or 
highly functional, rich prototypes with 
conditional logic, dynamic content, 
animations, math functions, and data- 
driven interactions. Use Axure Share to 
upload content to share with your team. 


Asana 


asSana.com 

Asana is an online project management 
tool, designed to help teams track their 
work. Asana gives you everything you 
need to stay in sync, hit deadlines, and 
reach your goals. 


MockFlow 


mockflow.com 

MockFlow provides a full solution for 
design teams, which includes wireframing, 
sitemaps, UI spec systems, design 
workflow and more. Enables you to plan 
and create better user interfaces together 
within a single suite. 


Storyboard That 


storyboardthat.com 

Storyboards are a fun and engaging way to 
relay research findings and user journeys 
to stakeholders. Use their extensive image 
library and flexible templates to create 
storyboards of this information. 


Smaply 

smaply.com 

This website has an online editor which 
enables you to integrate basic service 
design tools into your daily work, such as 
user journey maps, stakeholder maps and 
personas. Your designs can be 
downloaded as PDFs and image files. 
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Top tools for 
conversational design 


BotPreview 

botpreview.com 

Sketch and design your own chatbot 
interactions using the BotPreview online 
editor and share them or export as static 
HTML or MP4/GIF video, without writing a 
single line of code. 


Botsociety 

botsociety.io 

Design voice and chat interfaces using 

the online web editor by quickly building a 
high-fidelity preview of your next chatbot 
or voice assistant. Botsociety takes care of 
the appearance, the platform limitations, 
the preview, the export and the user 
testing for you. 


Botmock 


botmock.com 

Botmock uses a drag-and-drop editor 
with templates to build prototypes of 
conversational design. Map out the 
customer’s journey, and create a live 
preview that can be exported to GIF 
and video. 


Bots UI Kit for Sketch 
bots.mockuuups.com 


A simple and fully customisable Sketch UI 
kit to help you design and showcase your 
Facebook Messenger Bots. All elements 
are turned into new branded Sketch 
symbols, so prototyping has never 

been easier. 


Walkie 


walkiebot.co 

This tool is especially for Slack users to 
help design slack bot dialogues. It provides 
an easy way to write and test bot 
dialogues, which include buttons and 

also attachments. 


web workshop 


Create a wobbly text 
effect with JavaScript 


Inspired by https://patrickheng.com 


Intro text More text animation 

As the text animates onto the screen there If the user puts their mouse over the text, 

is different coloured text and each letter the letters compress inwards towards the 
animates onto the screen separately mouse at different rates, showing the split 
creating a wobbly delay to each word. of different colours in the text. 


The projects 
Each project is 
displayed with an 
animated preview 
so that the user can 
see the project 
working before 
clicking onit to Hi, lam a 25 y/o Belgian stylist, 
know more about it. graduated in 2014 in fashion design. 
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The main menu 
Clicking the menu brings an overlay 
with more animated letters. The 
overlay has a dark background to 
contrast the regular look of the site. 


The next project 

With some sites it’s hard to know that 
there is even any content below, but 
here the next project is visible by 
always being placed just on the screen. 


= 
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EXPERT ADVICE 
Inspiration for CMY 


The inspiration for the text having 
different colours seems to come from 
the world of print. When three inks 
Cyan, Magenta and Yellow are 
overlapped they produced an almost 
black colour. This site uses a similar 
effect with colours close to those and 
a blending mode of ‘multiply’ to 
achieve the result. 


Create a wobbly text effect with JavaScript 
S DOWNLOAD TUTORIAL FILES wwwfilesilo.co.uk/webdesigner 


Experiments in typography 
For my portfolio, we wanted to animate typography in an original way. Nicolas 
Loureiro (the Ul designen came with the idea to separate the colour layers of 


<comment> | the text on the site. Then we did a lot of testing with After Effects and in code to 


What our 
experts think 


find the right effect and to find fun interactions around this. 


of the site | Patrick Heng, creative developer at Merci-Michel and Gobelins Paris student 


Technique 


1. Creating the intro text 
Open the project files and you will see that there is 
the velocity.js and blasts library. Blast splits text up, 
while velocity is a tween engine. There are three 
offset variables to make each piece of text move at 
different intervals. 

<script> 

var offsetl = Q; 

var offset2 = Q; 

var offset3 = Q; 

</script> 


2. Splitting the text 


Using blast, each of the text characters are split into their 


own span element. Then the top layer of text is looped 


through and the offset is increased for each letter so they 


animate independently. 
$(“h1”) .blast({ 
delimiter: “character” 
Ds 
function anim() { 
var $spans = $(“#top”).find (‘span’); 
$spans.each(function() { 
offsetl += 4Q; 


3. Adding velocity 
Now the velocity library adds the movement and 
Opacity so that the letters move up and fade in. Each 
letter is offset, and the duration and easing are set for 
each of the letters. 

$(this).velocity({ 

translateY: -100, 

opacity: 1 

I, f 

delay: offset1, 

duration: 800, 

easing: “easeOutBack” 

IDs 

De 

3 


4. Calling the action 


Now the ‘anim’ function is called and this triggers the 


animation to begin. A ‘setTimeout’ function now staggers 


the second block of text that will be yellow. Again, it is 
triggered using velocity as in the first example 
anim() ; 
setTimeout(function() { 
var $spans = $(“#middle”).find(‘ span’ ); 
$spans.each(function() { 


offset2 += 40; 

$(this).velocity({ 
| translateY: -100, 

opacity: 0.8 

tacks 


5. Moving on 
The delay, duration and easing are set so that the 
second yellow text moves correctly. Then the last piece 
of text which is orange is controlled in the next 
‘setTimeout’ function to delay this moving a little longer 
before starting. 
delay: offset2, 
duration: 800, 
easing: “easeOutBack” 
i); 
ys 
+}, 100); 

setTimeout(function() { 


var $spans = $(“#bottom’).find( ‘span’ ) ; 


6. Final letters 


Now the final letters are moved into place. This gives the 


same effect as Patrick Henq’s site, which has layers of text 


moving. Patrick actually uses WebGL to move the text 
but this is a simpler way with DOM elements. 
$spans.each(function() { 
: offset3 += 40; 
| $(this).velocity({ 
translateY: -100, 
opacity: 2.8 
joan 
delay: offset3, 
duration: 800, 
easing: “easeOutBack” 
5 
Be 
| }, 150); 
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Tutorials 


Create a fun face 
detection photo. app 


Combine the power of facial recognition and a web cam to build a 
photo booth-style app using clmtracker and the p5.js library 
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ith the rise of social applications, a 
big part of their popularity has 
been their built-in photo 
manipulation tools. Instagram has 
become synonymous with filters and more recently 
social apps Nave capitalised on the rise of Augmented 
Reality to recognise faces in images and to overlay props 
on various facial features. This has been hugely popular 
among users and a contributing factor in the mobile 
success of certain apps. In this tutorial, an app for creating 
photos with face detection will be created running in the 
web browser. [he facial recognition is added using the 
clmtracker (constrained local models tracker library and 
then props will be added to the face using P5js to 
manipulate the HTML5 canvas. 

The clmtracker recognises /O unique points on a face 
giving access to the x and y values of those points. Using 
these points it’s possible to add glasses to the eyes, hats 
to the top of the head, false moustaches and just about 
anything that you can think of as a photo prop. The 
objects are controlled using code so that they orient to 
the head if it tilts from side to side by measuring the angle 
between the eyes and applying that to the prop. The 
scaling is worked out from the distance between the eyes 
so that the props scale to the face no matter the distance 
A photo app needs to allow the user to save their image 
once happy, so that will also be the final feature. 


1. The beginning 
Open the ‘start’ folder in your code IDE and then open 
‘index.html’ to edit. In the body section of the page add 
the logo and the instruction div tags as shown below. 
These will be styled up to sit over the top of other content 
with CSS. 

<div id=”logo”’><img src=”img/logo.png” 

alt=’Photo Boom Web Studio”></div> 

<div id=”"inst”>Use left and right arrow key 

to change prop 

<br> Press S to save the screen 
</div> 


2. Defining the styles 


In the head section add style tags to add this CSS to, or 
alternatively you could put this in its own CSS file. This 
code styles the body to fill the screen, removing the 
default browser margins and changing the typeface that 
will be used for the instructions 
html, body { 
width: 100%; 
height: 100%; 
overflow: hidden; 
padding: Q; 
margin: Q; 
font-family: “HelveticaNeue-Light” , 
“Helvetica Neue Light”, “Helvetica Neue”, 
Helvetica, Arial, “Lucida Grande”, sans- 
serif; 
font-weight: 300; 
-webkit-font-smoothing: antialiased; } 


3. Scaling the app 


The app will run in a canvas element with a video 


element in the background. Here these tags are styled to 
take the full width and height of the screen, so that they 
are always viewed in the same place one over the other. 
video { 
display: block; 
width: 100% !important; 
height: auto !important; 
vertical-align: top; 
J 
canvas { 
display: block; 
width: 100% !important; 
height: auto !important; 
vertical-align: top; } 


4. Position the logo 
The logo div tag will be placed in the top-left corner of the 
screen at a higher z-index to other content. The image 
inside this is then just resized to make this fit better on the 
display and not take up too much room within the design. 
#logo { 
position: absolute; 
z-index: 1000; } 
#logo img { 
width: 31@px; } 


5. Placing the instructions 
The instructions are positioned in the bottom left of the 
screen, also above all other content. There is a slight 
padding added and the background is set to a 
semi-transparent black with white text to stand out over 
the top. 
#inst { 

position: absolute; 

bottom: Q; 

left: Q; 

z-index: 1000; 

padding: 3Qpx; 

background: rgba(@, 2, @, 0.6); 

color: #fff; } 


6. Sketching it up 
Now save the HTML and switch over to the ‘sketch,js 
file. This will hold all of the code. At the top of the page 
add in some variables for the tracker, canvas and video, 
then other will hold various props that will be displayed 
on the screen. 

var ctracker, cnv, videoInput; 

var glasses, moustache, whiskers, pipe, 

ears, hat, nose; 

var mode, saving; 


7. Preloading the images 
Before the images can be displayed in the app they first 
have to be loaded in. Thankfully p5.js has a ‘preload’ 
function that will load these elements before the rest 
of the code runs. Here the images are loaded and stored 
in variables. 
function preload() { 
glasses = loadImage(“img/glasses.png”) ; 
moustache = loadImage(“img/moustache. 
png”) ; 


Tutorials 


whiskers = loadImage(“img/whiskers. png”) ; 
pipe = loadImage(“img/pipe. png”) ; 

ears = loadImage(“img/ears. png’) ; 

hat = loadImage(“img/hat.png”) ; 

nose = loadImage(“img/nose.png”); } 


8. Setting up the app 
The ‘setup’ function runs right after the preload has 
finished. This creates the video from a webcam and sets 
the size of the video, which is also the same size as the 
canvas. The pixel density of the display is set to 1, which 
means it ignores high density displays and this is 
necessary to make the image saving work. 
function setup() { 

videoInput = createCapture(VIDEO) ; 

videoInput.size(800, 62Q); 

videoInput.position(@, Q@); 

cnv = createCanvas(800, 62Q); 

cnv.position(@, Q); 

pixelDensity(1); 


9. Add the tracker 


The tracker is added and initialised, and it is set to work on 
the video. The ‘mode’ variable is used to change the prop 
that is being displayed on the image. The one here refers 
to the first image, which is the glasses. The ‘saving’ 
variable is used to save the frame as an image, so the 
user can take a snapshot. 

ctracker = new clm.tracker(); 

ctracker.init(pMode1) ; 

ctracker.start(videoInput. elt) ; 

noStroke() ; 

mode = 1; 

saving = false; } 


10. Updating the screen 
The ‘draw function is called every frame to update the 
screen. Here the screen is cleared between frames. The 
‘positions variable is updated with the tracking position of 
the head. The ‘if statement checks the ‘saving’ variable, if 
it’s set to true the video is written in as an image, 
otherwise the canvas has a transparent background. 
function draw() { 
clear(); 
var positions = ctracker. 
getCurrentPosition() ; 
if (saving) { 
image(videoInput, 2, @, width, height); 
J 


11. Detecting a face 

If a face is detected, then 7O positions of the face are 
Stored in the ‘positions’ array variable. lf the ‘positions’ is 
greater than one, then a face is detected. The angle is 
calculated using the position of the eyes and also the 


Screen positioning 


The video and canvas elements are created 


dynamically through JavaScript code so the div 
tags in the body have to be positioned 
‘absolutely’ at higher z-index levels. 
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Mapping the points 


20 al 
. on the face 
19¢ 22 18 You may be wondering how 
33 


17 16 
) 15 
24 ms (3 29 6 the numbers for the points 
6 14 on the face actually relate to 
o 23 7S a0 oo - a face. How might something 
; ne just cover the right eye, such 
4! as a pirate eye patch? The 
ig answer lies on the clmtracker 
GitHub page (https://github. 
com/auduno/clmtrackr). 
Here you will find an image 
with all 70 facial points shown 
in their relationship to the 
face. Using this as a guide it 
is possible to get hold of any 
point, such as the right eye 
using ‘positions[32][O]’ for the x 
axis position and ‘positions[32] 
[1]’ for the y axis position. The 
tutorial uses the points 
between each eye to work 
out the angle that the head 
is tilted and the scale of the 
head as each user is likely to be 
positioned at different depths. 


i | 
le 
Above The whiskers are a lot of fun and there is no limit to 
what you can display as an overlay on the face 
7 “ Above With the moustache working it’s possible to see 
Above Here the glasses are added, and are scaling perfectly to fit the face in the scene here the rotation to the face as well as the scaling 


Above The ears are placed dynamically above the eyes 
using the length of the nose as the guide 


Above The left eyebrow is the point at which the hat is 
positioned from, again using the nose as a guide 
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distance between the eyes. This will enable the props to 
be rotated and scaled accurately. 
if (positions.length > 1) { 
//angle between eyes gives angle of head 
var ang = atan2(positions[27][1] - 
positions[32][1], positions[27][0] - 
positions[32][@]); 
//distance between eyes so can work out 
scale 
var d = int(dist(positions[27]LQ], 
positions[27][1], positions[32][0], 
positions[32][1])); 
var scl = map(d, @, 290, 0, 1.8); 


12. Position the sunglasses 
The sunglasses are going to be positioned at point 33, 
which is between the eyes. The glasses are then rotated 
to the correct angle and scaled. Half the width and 
height is taken off the glasses so that its anchor point 
is the centre of the image as it’s displayed in the centre 
of the eyes. 
if (mode == 1) { 
push() ; 
//33 position between eyes 
translate(positions[33][0], positions[33] 
Bubs ye 
rotate(ang + PI); 
scale(scl); 
image(glasses, @ - glasses.width / 2, Q 
- glasses.height / 2); 
pop(); } 


13. Changing the mode 
The ‘mode variable will be changed with the arrow keys 
So when the mode is set to 2 then the moustache will be 
positioned at point 37 the base of the nose. You will notice 
that the position is set using ‘positions[37][O],, which 
stores the x value and [1] stores the y value. 
else if (mode == 2) { 
push() ; 
//37 position base of nose 
translate(positionsl37][0], positions[37] 
Ls 
rotate(ang + PI); 
scale(scl); 
image(moustache, @ - moustache.width / 2, 
=15); 
pop(); } 


14. Placing the whiskers 

The next prop for mode 3 is the whiskers image, which 
will be placed at the point on the mid nose. The scaling of 
this image is increased as well so that the whiskers stick 
out a little more from the side of the face and so that they 
Start out a little from the nose on each side. 


Push and pop 


Push and pop are often used with translate and 


rotate, because it moves the drawing position to a 
new place on screen and uses this as the origin to 
rotate that new drawing. 
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else if (mode == 3) { 
push() ; 
//41 position mid nose 
translate(positions[41]L@], positions[41] 
LI); 
rotate(ang + PI); 


scl x= 1.8; 
scale(scl); 
image(whiskers, @ - whiskers.width / 2, 
Q); 
pop(); 
15. Pipe dreams 


Mode 4 will be the pipe image and this is going to be 
placed at the left-hand side of the user's lip. If the lighting 
is good, it tracks pretty well to the mouth opening and 
closing, which adds that realism for the prop working with 
the user. 
else if (mode == 4) { 
push() ; 
//56 position left mouth 
translate(positions[56]LQ@], positions[56] 
[1]); 
rotate(ang + PI); 


scale(scl); 
image(pipe, @ - pipe.width, Q); 
pop(); } 

16. Animal ears 


The next prop is animal ears and a new distance is 
calculated for the length of the nose. The ears are going 
to be positioned between the length of the nose above 
the middle of the user's eyes, which is just above the 
hairline on most people. 
else if (mode == 5) { 
//33 to 62 length of nose place this 
distance above 33 for ears 
var d2 = int(dist(positions[33]LQ], 
positions[33]L1], positionsl37]L[Q], 
positions[37][1])); 
push() ; 
//33 mid eyes 
translate(positions[33]L@], positions[33] 
EE) 
rotate(ang + PI); 
scale(scl); 
image(ears, @ - ears.width / 2, @ - 
(ears.height + d2)); 
pop(); } 


17. | tip my hat to you 
The hat prop is slightly tilted to one side, so this will be 
placed above the left eyebrow, and once again the length 
of nose is calculated to position this above the eyebrow. 
We have to use a dynamic position as there is no other 
way to know how close the user is to the camera. 
else if (mode == 6) { 
//33 to 62 length of nose place this 
distance above 33 for ears 
var d2 = int(dist(positions[33]L@], 
positions[33]L1], positionsLl37][Q], 
positions[37][1])); 


push() ; 

//2® position left eyebrow 

translate(positions[20]LQ@], positions[20] 
ep 

rotate(ang + PI); 

scale(scl); 

image(hat, @ - hat.width / 2, @ - (hat. 
height + d2)); 

pop); } 


18. Last prop 
The last prop to be displayed is a clown’s nose. This is 
easy to position as we have a point that is the nose. All of 
the props are now ready to go, but the user still needs a 
way to control them shifting from one prop to another 
with the keyboard. 
else if (mode == 7) { 
push() ; 
//2® position left eyebrow 
translate(positions[62]LQ@], positions[62] 
i); 
rotate(ang + PI); 
scale(scl); 
image(nose, @ - nose.width / 2, @ - nose. 
height / 2); 
pop); + 3 


19. Finishing the draw 
The end of the draw function is now completed and the 
image is saved out using the file name ‘me.ong’ and the 
‘saving variable is set to false so that hundreds of images 
arent created! The user will control the saving by pressing 
‘s on the keyboard. 

if (saving) { 

saveCanvas(cnv, 


‘me’, ‘png’); 


saving = false; } } 


20. Detecting key presses 
The last part of the functionality requires key presses so 
this code detects if the right cursor key is pressed and 
cycles up through the modes. This in turn changes the 
props on display for the photo app on the screen. 
function keyPressed() { 

if (keyCode === RIGHT_ARROW) { 

if (mode == 7) { 

mode = 1; 

} else { 

mode++; } } 


21. Final step 
The final part of the code does the same as the previous 
Step for the left arrow key to cycle down. The ‘s’ key is 
mapped to save the image. Save all your files and test 
them ona server to see this working. Make sure you have 
reasonable lighting on your face for best results. 

if (keyCode === LEFT_ARROW) { 

if (mode == 1) { 


mode = 7; 
} else { 
mode--; } } 


if (keyCode === 83) { 
saving = true; } } 
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Add animated 
particles to pages 


In this tutorial, the basics of particle.js library will be 
covered to help you animate your landing pages 


Particle Effect 
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he first page that your visitors land onin 
your website has a significant influence 
on their subsequent actions in the 
website. On the one hanq, it may influence 
them to navigate to other pages or undertake specific 
actions such as clicking buttons; while on the other, it may 
put them off, causing them to leave the site. As such, it is 
important to ensure your landing page appeals to your 
visitors in order to influence their latter decisions. 

One way to achieve this feat is to implement 
interactivity using a particle system. Such a system 
comprises of a lot of tiny particles moving about in the 
page. The particles interact with one another in addition 
to responding to user actions such as mouse movements 


and mouse clicks. 

This tutorial will begin by covering the basics of 
creating a fullscreen landing page using HTML5 and 
CSS3 and then proceed to animate it by implementing 
the library. 

We'll also share some advanced tweaks of the library 
that will enable you to make your landing pages even 
more appealing. We'll also share some tips on frontend 
development and landing page design, the aim being 
that by the end of this tutorial you will have all the skills 
and knowedge you need to be able to the use the library 
to create amazing landing page effects. 


1. Get started 


Begin by creating a folder, particles, on your desktop to 
Store the tutorial files. Create three additional folders 
within it: ‘img to store images, ‘css to store the styling 


files, and ‘js’ to store JavaScript files. 


2. Create the landing 
page structure 
Open your code editor and create an ‘index.html’ 
document to contain markup for the landing page. Begin 
by creating the basic structure and give a suitable title to 
the page. 

<! DOCTYPE html> 

<html lang=’en’> 

<head> 
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<meta charset=”"utf-8’> 
<meta name=’viewport” 
content=”"width=device-width”, initial- 
scale=1.@> 
<meta http-equiv=”x-ua-compatible” 
content=” ie=edge”> 
<title>Particle effect </title> 
</head> 
<body> 
</body> 
</html> 


3. Add some content to 

the landing page 

Create a header tag with the id ‘fullscreen’ and a section 
with the id ‘text’ in the body section. Within the header 
section, add an <hl> tag with the text ‘Particle Effect’ and 
an <h3> tag in the text section. 


<body> 

<header id = “fullscreen’> 
<h1> Particle Effect </h1> 
</header> 
<section id = “text’> 


<h3> This is a simple tutorial for animating 
your landing pages with particle effects </ 
h3> 
</section> 
</body> 
KKKKKKKKEK 
Render the page in your browser. It should appear as 
shown in the first of the two images below. 


4. Styling the landing page - 

link the CSS file 

The landing page currently looks very basic. The aim is 

to add an image background and style the text so that it 

is centred on the page. Open your favourite code editor 

and then create a ‘styles.css file inside the ‘css’ folder. 

Now, create a link to this file in your HTML document 

by adding the following code in the head section: 

[ <link rel="stylesheet” 
href=’css/styles.css” > 


This is a simple tutorial for animating your landing pages with particle effects 
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This is a simple tutorial for animating your landing pages with particle effects 
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5. Styling the landing page 
style the body text 
Begin by setting padding and margin to ‘O’ for all 
elements in CSS. This ensures that the design remains 
consistent throughout the page. Note that at this point, 
you should not observe any noticeable change in your 
HTML document. 
aa 
margin: Q; 
padding:@; } 
Style the body text by adding the font family, font size, 
color and line height information. This styles all 
paragraphs and text added to your html document. 
body { 
font-family: Garamond, Baskerville, 
“Baskerville Old Face”, “Hoefler Text”, 
“Times New Roman”, serif; 
font-size: 17px; 
color: coral; 
line-height: 1.6; 
3 
KKKKKKK 


At this point, the landing page is still not appealing. 


6. Style the landing 
page background 
Begin by adding an image background. Use the free 
image of a man downloaded from pexels.com. Add the 
following styling code in the CSS file: 
#fullscreen 
8 
background-image: linear-gradient(rgba 
(0,0,0,0.7), rgba(0,0,0,0.7)), url(C‘../img/ 
man. jpeg’ ); 
background-size: cover; 


Alternative centring 


You can adopt a table layout and specify a 


middle alignment for the heading. You can 
choose to work with padding and absolute 
positioning or adopt a Flexbox layout. 


Top 

To get started create a simple landing 
page with a title and the necessary 
HTML tags 


Bottom 

With all of the HTML elements in place, 
the body text can be styled on the 
landing page 
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background-position: center; 
height: 10Qvh; 
J 

The first line adds the image to the background in 
addition to a linear gradient set to black with an opacity 
of 70 per cent. The second and third lines detail the 
background size and position properties, while the last 
line informs the browser that we would like the viewport 
height to be at ‘100 at all times, thereby ensuring it is 
completely visible. 


7. Style the main heading 


The heading is currently aligned at the top mid section. In 
order to style it to appear at the centre of the page, simply 
add the following code: 
#fullscreen hl 
{ 
font-size: 5Q@px; 
position: absolute; 
top: 2/@px; 
left: 50Qpx; 
font-weight: 200; 
color: aquamarine; 
3 
The code assigns absolute positioning to the heading and 
aligns it appropriately at the top and left sections. Add 
‘fontweight’ and ‘color to make it look appealing. 


8. Style the section text 


To style up the <h3> tag in the text section, add the 
following code: 
#text h3 
{ 
font-size: 25px; 
padding: 4Qpx; 


Tweaking the system 


It can be challenging to compare the effects of 
different parameter configurations. To ease the 
process, head over to vincentgarreau.com/ 
particles.js/#default where controls are provided. 


Top 

To finish up the landing page used in this tutorial a 
background image has been added and set to fill the 
screen. The text is styled to contrast with the 
background colour 


Right 
The finished landing page with particle effects added 


58 tutorial 


color: #408159; 

font-size: 25px; 

font-family: Arial, “Helvetica Neue”, 
Helvetica, sans-serif; 

text-align: center; 
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9. Download the 

particles.js library 

Now that the simple landing page is complete, download 
the ‘particle js library’ from Github. Follow this link: 
github.com/VincentGarreau/particles.js/. Click the 
‘Clone or download’ option from where you can 
download the library. 


10. Unpack the particles.js library 
Once downloaded, unpack the files and copy three files 
to the js folder created in Step 1. These files are’ ‘apps, 
‘particlesjs, and ‘particles.min.js. Note that while the last 
two are located in the main ‘particlejs master folder, 
‘app js is located in the ‘demo / js’ folder. 


11. Implement the particles.js 
library - HTML code 


To implement the library, create a div with the id 
‘particles-js and add links to the three js files in the body 
section. However, it is important to note that the ‘particles’ 
div and ‘fullscreen’ div are both performing the same 
function since they act as the container of the landing 
page. This implies that we comment out the current 
‘fullscreen’ div and copy its contents to the ‘particles div. 
The HTML page code will now appear as follows: 
<body> 
<div id =”particles-js’> 
<h1> Particle Effect </h1> 
<script type=”text/javascript” src =’js/ 
particles. js”></script> 
<script type=”text/javascript” src ="js/ 
particles.min.js”></script> 
<script type=”text/javascript” src =’js/ 
app. js”></script> 
</div> 


<section id = “text”> 

<h3> This is a simple tutorial for animating 
your landing pages with particle effects </ 
h3> 

</section> 

</body> 


12. Implementing the particles.js 
library - CSS code 
In the same way, we comment out the the styling 
assigned to the ‘fullscreen’ div and paste it to the 
‘particles-js’ div. The code should now appear as below 
for the main container: 
#particles-js { 
background-image: linear-gradient (rgba 
(0,0,0,0.7), rgba(0,0,0,0.7)), url(‘../img/ 
man. jpeg’ ) ; 
background-size: cover; 
background-position: center; 
height: 10Q@vh; } 


13. Implementing the particles.js 
library - more CSS code 
Similarly, comment out styling code previously assigned 
to the <hl> and copy it to the ‘particles-js <h1> div. 

#particles-js hl 

t 

font-size: 5Qpx; 

position: absolute; 

top: 2/@px; 

left: 50Qpx; 

font-weight: 200; 

color: aquamarine; } 
The landing page should now appear as shown in the 
main image at the bottom of this page, with particles 
appearing in the background. 


14. Tweak the particle system 
Implementing the particle system in your web page is 
only the tip of the iceberg. To maximise its capability, we 
need to tweak its different parameters. Two important 
aspects are tweaked: the particles and the interactivity. 
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To begin this process, open the ‘app,s file in the ‘js’ folder 
using your code editor. 


Particle number and density 
To begin with, the particle system provides the option to 
change the number of particles that are rendered, and 
the density value area within which they move about. In 
the ‘app js file that you already have open, locate the 
number and density parameters. Amend the value and 
value area respectively. 

“particles”: { 


“number”: { 
“value”: 100, 
“density”: { 


“enable”: true, 

“value_area”: 800 
Note that increasing the two parameters causes a higher 
number of particles to be rendered, while reducing the 
two parameters lowers their number. 


Colour and shape 
To change the colour, simply change the ‘color’ code to 
your preferred option. Similarly, increase or decrease the 
shape stroke size; the type of shape (circles, edges, 
triangles, polygons, stars, or images); the number of 
polygon sides; and the image source that the particle 
system uses. For instance, changing the shape to ‘star’ 
and the colour to ‘green’ produces different results. 


Size and opacity 
Under the ‘size’ property, it is possible to enable or disable 
particle animation; tweak the animation speed (higher 
values means higher speed); increase or decrease the 
particle sizes; and disable the random movement of the 
particles. Similarly, increasing opacity makes the particle 
colour sharper. 


Line linked 
The ‘line linked’ parameter, when enabled, creates lines 
connecting the different particles. You can disable the 


particles.js 
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parameter, if you wish, so that you particles move around 
without any having links within them. Similarly, it is also 
possible to increase the distance between the different 
shapes, as well as change the colour, opacity and width 
of the connecting lines - try experimenting with each of 
these options until you achieve the look that you're after 
for your site’s landing page. 


Movement 
The movement of the particles can be disabled, causing 
them to remain static on your landing page. The direction 
of the movement of the particles can also be tweaked 
(none, top, top-right, right, bottom-right, bottom-left, left, 
left, top-left); as can the particles’ speed (higher means 


faster. You can also adjust the ‘out’ mode (out or bounce). 


For instance, changing the direction of the particles to 


| Creating a custom 


| particle configuration 
While the default particle system 
configuration works, you are not 
limited to using it in your website 
as provided. vincentgarreau.com/ 
particles.js/#default provides 
controls to visually test out different 
parameter values and download 
them to your offline location. The 
controls enable you to configure 
the particle options, interactivity 
and page background CSS. 
Additionally, the visual controls 
provide interactivity through the use 
of sliders to increase or decrease 
parameter values; clickable options 
to enable or disable parameters; and 
text boxes where options such as 
colour codes can be manually added. 
Once configured, you can download 
the configuration as a JSON file to 
implement in your website. The figure 
| (left) shows the visual system. 


top-right leads to them moving towards the top-right 
section of the screen. 


Interactivity - mouse actions 
The interactivity of the particle system can be tweaked to 
respond to mouse actions. ‘On hover’ actions can be 
amended to either grab, bubble or repulse; while ‘on click’ 
actions can be tweaked to bubble, push, remove or 
repulse. Both actions can also be disabled, if you wish. 


Modes 


The four modes of interactivity can be tweaked. For the 
grab and repulse modes distance can be increased while 
with the bubble mode, distance, size, duration, opacity 
and speed can be tweaked. Finally, bush and remove 
modes can have their particle number increased. 


Particle Effect . 
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Build a modal 
component in React" 


Learn how to create a simple, usable modal component 
leveraging the power of Rea@ts portal functionality 


New York Holiday x 


Please complete and submit the following form to book 
your free holiday to New York* 


First Name Last Name 


Email Address 


Contact Number 


Date of Birth 


Account # Sort Code 


DOWNLOAD TUTORIAL FILES 
60 tutorial www filesilo.co.uk/webdesigner 


eact is one of the most popular 
JavaScript frameworks in use today. 
Created by Facebook to help it build user 
interfaces, React brings simplicity, soeed, 
and scalability to web projects. 

In this tutorial, were going to use React to create a 


simple modal component, which is optimised for both 
desktop and mobile devices. To enhance the modal, we'll 
be using React’s relatively new and very useful portal 
functionality, which enables us to render an element 
outside of the DOM hierarchy of its parent component, 
whilst still behaving like a normal React child. 

To begin, download the tutorial files from Filesilo, then 
open the ‘website-template’ directory in your preferred 
text editor. In Terminal, ‘CD’ into ‘website-template’ and 
then run ‘npm install’ to install all of the project's 
dependencies. We can then start a development server 
by running the ‘nom run start’ command, enabling us to 
view the website at ‘localhost:3000° As we make 
changes, this page should automatically refresh, so 
helping us to ensure that were always looking at the 
most up-to-date version. 


1. Create component structure 
In ‘src/components’ create a new file called ‘Modaljs. All 
the CSS for the modal is already present in‘ Modal.scss, 
enabling us to focus purely on building the React 
component. Within the new file, we'll create a new React 
component called ‘Modal’ by importing and then 
extending React’s component class. 
import React from ‘react’ ; 
import Close from ‘../assets/img/close. svg’ ; 
export default class Modal extends React. 
Component { 
constructor(props) { 
super (props) ; 


I 


Congratulations 


wen 


2. Validate props 


Next, we'll set some validation rules for properties, which 
our Modal will accept when used in parent components. 


Below your import React statement, add “import 
Proplypes from ‘prop-types” and then below the 
constructor function in the component itself, add the 
following snippet: 
static propTlypes = { 
active: PropTypes.bool.isRequired, 
focusElem: PropTypes.string, 
handleClose: PropTypes. func. isRequired, 
returnFocusElem: PropTypes.object, 
title: PropTypes.string } 


3. Create modal JSX 
Create a new function within the component called 
‘modalContent’. We'll use this to store the JSX (AKA: the 
HTML) of our modal. The use of ‘this.props.children 
enables us to pass the modal its content like a regular 
HTML element without us having to modify the 
component directly. 
modalContent = () => { return ( 
<div className=’ c-modal’ > 
<div className=’ c-modal__wrapper’ > 
<div className=’ c-modal__title-wrapper’ > 
{this.props.title ? <h1l className 
=’t-beta c-modal__title’>{this.props. 
title}</h1> : ‘’} 
<img src={Close} className=’ c-modal__ 
close’ 
tabIndex=’Q’ alt=’Close Modal’ /> 
</div> 
<div className=’ c-modal__box’> 
<div className=’c-modal__content’> 
{this.props. children} 
</div> 
</div> 
</div> 
</div> 
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4. Render modal - part 1 
For now, let’s render the modal to the screen so we can 
see what were working with. In the modal component, 
create a new function called ‘render and pass it our 
‘modalContent’ function. Add the below as the last 
function of the React component: 

render() { 

return this.modalContent() ; 
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5. Render modal - part 2 
Open ‘CallToAction.js. This is the parent component, 
which will store our new modal. First off, let's import the 
modal to this component by adding “import Modal 
from ‘/Modal:’ to its list of imports. Then within this 
components render function, just before the closing 
‘div’ element, add the following snippet: 

<Modal title=’New York Holiday’> 

<AppForm /> 
</Modal> 


6. Add portal mount point 

You should now be able to see the modal. Since it’s still 
located within the DOM tree of its parent component, the 
parent styles are interfering with its display. One way to fix 
this is to render the modal right at the top of the DOM 
tree, just after the opening ‘body’ element. This can be 
done using React Portals, which provide a way to render 
children into a DOM node that exists outside the 
hierarchy of the parent component. Let’s start by adding 
a new element to ‘Appjs, the top-level React component, 
to hold the modal. Add the following snippet just after this 


Errors 


One of the good things about developing whilst 
the dev server is running (AKA: ‘npm run start’) 
is that if you make any coding errors, React will 
display these right at the forefront of your app 
so you know what has gone wrong immediately. 


loqvesaien bias pe bes ox 


Left 

Within this tutorial’s app, you can use React dev tools 
to examine each individual component, see what props 
they’re being passed, as well as any internal state that 
they are holding 


Top 

With a component selected in the dev tools, if you then 
type ‘$r’ into the standard dev tools console, you can view 
the React component as a pure javascript object, which 
can come in very handy during development 
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component's opening ‘div’ attribute: 
I <div id=’modal-root’ /> 


7. Create the portal 
Next, back in ‘Modaljs’ add “import { createPortal } from 
‘reactdom; just after the React import. Then in the 
‘constructor function, just after the ‘super’ function, add 
“this.el = document.createElement(div);’ This is the 
wrapper element, which the ‘createPortal’ function 
requires to hold our modal content. Finally, replace the 
existing ‘render’ function with the snippet below to render 
the modal through the context of a React portal: 
render() { 

return createPortal ( 

this.modalContent() , 

this.el 


5 
8. Mount the portal 


You will notice the modal has vanished. This is because 
we still haven't mounted the modal portal into the ‘div’ 
element we created at the top of the DOM tree. Add the 
below snippet to the ‘modal component to make it 
appear again: 


| componentDidMount() { 
document. getElementById(‘modal-root’). 
appendChild(this.el); 
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9. Tracking modal state 

At the moment our modal is always showing. Obviously 
this isn't ideal, so let’s build in some toggle functionality. 

Open ‘CallToAction.js; and add the following snippet just 
before its ‘render function. This adds two things: a state 

object containing a Boolean to track if the modal should 


Learning from others 


With React dev tools installed, you can examine the 


contents of any other public React website and 
learn how it’s structured. Facebook and Instagram 
are two good examples to check out. 


Create React App a 


Caer Chm terey 


Top 

The template for this tutorial was originally generated using 
Create React App. This is a handy tool created by Facebook 
that lets you quickly generate a React app with all the nitty 
gritty setup and build configuration taken care of 


Right 

All of the app build configuration is hidden behind a 
dependency called ‘react-scripts’, which means as you 
update this package, you will always have the most 
up-to-date configurations in place 
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be showing, and a function to set this Boolean to ‘true’ 
which should also trigger the modal. 
state = { 
modalActive: false 
} 
showModal = () => { 
this. setState({ 
modalActive: true 
}) 
ii 


10. Pass state to modal 

We now need to pass the state object to the modal so it 
knows when it should be showing, or not. To do so, add 
active={this.state.modalActive} to the opening <Modal> 
tag. Then, still within ‘CallToAction.js, replace the ‘Claim 
Holiday button component instance with the version in 


the snippet below. What this does is pass our ‘showModal’ 


function to the button, so when it’s clicked, the 
‘modalActive’ variable in the state object is set to ‘true’ 
We wrap our ‘showModal function in another function 
to stop it from immediately firing on render. 
| <Button handleClick={() => this. 

showModal () }>Claim Holiday</Button> 


11. Conditional rendering 
In ‘Modal,js, let's now change the ‘render function so 
the modal only ever appears in the DOM if its ‘active’ 
prop is true. 
render() { 

if(this.props.active) { 

return createPortal ( 

this.modalContent() , 

this.el 

Ds 

} 

else { 

return false; 
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12. Create close modal function 
Now we'll look at closing the modal when its *X’ icon is 
clicked. In the ‘CallToAction.js component, duplicate the 
‘showModal function, rename it ‘closeModal’ then make it 
Set the ‘modalActive’ variable to ‘false’. Next, we should 
pass this function to the modal so it can be called from 
within it. To do so, pass it as the ‘handleClose’ prop as in 
the snippet below: 
<Modal 
handleClose={() => this.closeModal () } 
active={this.state.modalActive} 
title=’New York Holiday’ 
> 


13. Attach the close function 
Next, within ‘Modal,js, add ‘onClick={this.props. 
handleClose} to the ‘img’ element, so that our passed 
function will trigger on clicking the ‘X’ icon. We should 
also consider people who navigate using keyboards. 
Add the below function to the modal component, and 
then add ‘onKeyPress={(e) => this. handleKeyPress(e)} to 
the ‘Xx’ icon ‘img’ element. This will add functionality so 
that when the ‘X’ icon is in focus, and the user presses 
Enter, the modal closes. 
handleKeyPress = (e) => { 
if(e.which === 13) { 
this.props.handleClose() ; 
} 
} 


14. Add more ways to close modal 
We should also add additional functionality so the modal 
closes if the user clicks the darkened modal background, 
or presses the Esc key. Let’s cover the former first. Add 
the snippet below to the modal component and then add 
‘onClick={(e) => this.handleClick(e)¥ to the ‘c-modal’ 
element. What this does is listen for clicks on the modal 
element and then figures out if it was on the modal box, 
or the background, closing the component if it’s the latter. 
We have to use a ‘try/catch’ here for Internet Explorer 
compatibility purposes. 

B handleClick = (e) => { 
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Build a modal component in React 


Each component has several “hfecycle methods” that you can overncde to fun code at INSTALLATION 


particular times in the process. Methods prefined wath will are called nght before something 


heaonens, and methods prefimed with did are called night after gomething happens 


REFERENCE « 


the Ths are Cated When an mciance of a component = beng created and mseried 


inte the DOM 


* constructart } 


* componentWil Mout! ) 


» render ) 


* componentDidMount! |} 


Heel 
| React.Component 
ReactDOM 
ReactOOMSeryer 
DOM Elements 
SynthetceEvent 
Test Litifities 
Shallow Renderer 
Test Renderer 
J5 Environment Requirements 


Glossary 


An update can be caused by changes to props of state. These methods are called when a 


component is being re-rendered 


» component l ReceiveProps! | 


try { 

if(e.target.classList.contains(‘c-modal’)) 
{ 

this.props.handleClose() ; 

3 

J 

catch(error) { 

console. log(error) 

y 
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15. Add Esc key functionality 


Now we'll add the Esc key functionality. In the modal’s 
‘componentDidMount function, add the following 
Snippet to create an event listener on the document. 
This listens for any presses of the Esc key and then 
closes the modal in response. 
document .body.addEventListener (‘keydown’ , 
(6) =e 
if(e.which === 27) { 
this.props.handleClose() ; 
3 
ios 


16. Create object for scroll position 
One thing you will notice is that on smaller screens, 
when you scroll to the end of the modal content, the 
page content underneath the modal then starts to 
scroll. Ideally, we'd want the page content to freeze in 
place once the modal is activated, with the user’s scroll 
position being restored on modal close. To do this, we 
need to track the user’s scroll position on modal 
activate. Create a new state object in the modal, 
underneath its ‘propTypes’ validation, like below: 

state = { 

cachedScrollPosition: null } 
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17. Cache scroll position & freeze 
Next, we'll add a new ‘life cycle’ function to our modal 
component, which triggers when new props are received. 
In the function, we run an ‘if statement to see if the modal 
needs to be shown. If this is the case, we record the user's 
Current scroll position in our state object, and then in the 
‘setState’ functions callback, add a special ‘is-fixed’ class to 
the body, which prevents scrolling. 
componentWillReceiveProps(nextProps) { 
if(nextProps.active) { 
this.setState({ 
cachedScrollPosition: window.pageYOffset, 
oe Oram t 
document. body.style.top = ‘-${this.state. 
cachedScrollPosition }px’ ; 
document. body.classList.add(‘is-fixed’); 
aD: 
+ } 


18. Restore scroll on modal close 
We also need to account for when the modal is closed. If 
we dont, the ‘is-fixed’ class will be stuck on the body and 
the user wont be able to scroll. Add the below ‘else if’ 
statement just after the ‘if statement. This restores the 
page to its previous state, making sure the user retains 
their original scroll position. 
else if(this.props.active && !nextProps. 
active) { 
document .body.style. 
removeProperty (‘top’); 
document .body.classList.remove(‘is- 
fixed’); 
window.scrollTo(@, this.state. 
cachedScrollPosition); } 


19. Store ref for the 
button DOM element 


One helpful improvement we could make to the modal is 


React lifecycle methods 
In this tutorial, you'll be using 
lifecycle methods in React 
components. These are functions 
which are run at particular times in 
the process and can be overridden 
with your own code. Some lifecycle 
functions run before the component 
is mounted to the page, and some 
run afterwards. In this tutorial 
specifically, we'll be using: 
‘constructor’: This lifecycle 
function is run before the 
component is mounted. 
‘componentDidMount’: This one 

is run immediately after the 
component is mounted. 
‘componentWillReceiveProps’: 
This is run once a mounted 
component receives new props 
from a parent component. 

For information on all of the different 
lifecycle methods (there’s a lot), you 
can find extensive documentation 
at reactjs.org/docs/react- 
component.htnil. 


So when it’s closed, the focus is taken back to the button 
used to trigger it. That way, if the user is navigating the 
website via tabbing, they dont have to re-tab back to their 
previous position prior to opening the modal. In 
‘CallToAction.js, replace the ‘Button’ component with the 
new one below. What we're doing here is storing a 
reference to the button’s DOM element. 
<Button 
handleClick={() => this.showModal ()} 
refName={el => this.claimHolidayBtn = el} 


Claim Holiday 
</Button> 


20. Return focus to trigger button 
Pass the reference to the Modal component via its 
‘eturnFocusElem prop, like so: ‘returnFocusElem=tthis. 
claimHolidayBtn}. Then within ‘Modaljs, we need to build 
a ‘bridging’ function so we can perform actions after the 
user has signalled that the modal should close, but before 
it actually closes. Add the below function to the modal 
component, and then replace all references of ‘this.props. 
handleClose’ to ‘this. handleClose’ (Except for within the 
‘bridging’ function we've created). 
handleClose = () => { 

this.props.handleClose(false) ; 

if(this.props.returnFocusElem) { 

this.props.returnFocusElem. focus() ; 


ls 
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21. Success! Modal created! 

We've created an easy to use, flexible modal, which you 
can control via mouse or keyboard commands. Moving 
forward, you could improve this even further by adding 
things like animation via the ‘ReactTransitionGroup’ 
package. You can see a working example of this in the 
bonus-package directory. 
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Create an animated 
running water effect 


Inspired by en.oollee.com 
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Section indicator 
The on-page section indicator 
allows users to recognise how much 


Main navigation 
more content there is to access Navigation placed where 
from the page and where they are. g people expect to finda 

oP i navigation menu, enabling 
*~ users to quickly navigate 


y to the content they want. 
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Drip over title i Subtitle content Background image 


A pixel manipulation technique — The subtitle is not affected by the The background image is made from 
makes the drip effect clearly , p= drip effect; possibly because there an animated video, which despite its 
visible as it’s being animated in : being a risk of its smaller text appearance, is not part of the pixel 
different locations over the title. . becoming less readable. manipulation technique. 
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Simplifying effects 

The original effect relied heavily on the 
ability to perform pixel manipulation on 
the target image. The most suitable 
option for this is the use of the canvas 
element, which enables JavaScript to 
perform pixel operations on an image 
space. While the canvas approach is the 
most ideal option for the effect, it’s not 
as easy to use and understand as 
regular DOM/CSS styling. This type of 
effect would also require more than the 
nine steps of this tutorial. 

So what is the option to recreate the 
water drip effect used in the original 
website? After a bit of thinking and 
experimentation, it appears that pixel 
manipulation can be ‘faked’ with CSS. 
While the technique appears to show 
manipulation of the pixels to produce 
the dripping effect, the method uses 
multiple elements sharing the same 
background image - showing only a 
specific part for each animation frame. 

The use of CSS formatting provides 
an opportunity to further adapt the 
technique, such as by defining a shape 
for the outer container. Similarly, the 
technique could make use of SVG 
elements for better shape definition. All 
achievable without adding unnecessary 
the complexity through JavaScript. 


Create an animated running water effect 
S DOWNLOAD TUTORIAL FILES www-ilesilo.co.uk/webdesigner 


Avoiding the complications 
There are many advantages to keeping your code simple. Smaller file size and 
lower processing requirements are just two advantages that are relevant to 


<comment> | YOUr web projects. Where laptops and mobile devices are concerned, these 


What our 
experts think 
of the site | Leon Brown, freelance web developer 


enable your website to load faster and help preserve battery life 


Technique 


1. Initiate page document 

The first step is to define the page document. A container 
called HTML is used to store the head and body sections. 
While the head section is used to load the external 
JavaScript and CSS resources, the body section is used 
to store the visible content elements created in Steps 2-5. 


2. Body content definition 
The initial content consists of an article container that has 
a ‘drip class applied to it. This class is used as the 
reference name for JavaScript and CSS find where to 
apply the effect on the web page. 

<div class=”drip”> 
| </div> 


3. JavaScript initiation 
Create a new file called ‘codejs. The first step is to set an 
event listener to wait for the page to load - allowing for 
web page elements to be referenced. A loop counting up 
to the number identified by the ‘count variable is also 
initiated within this event. 

window. addEventListener(“load”, function(){ 

var count = 10; 

for(var i=@; i<count; i++){ 

*kk STEP 4 HERE 

3 
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4. Effect node creation 
Now ‘span’ nodes are created within the loop defined in 
Step 3. These span nodes are set to have a unique top 
margin and opacity based on their position. These 
unique attributes are important for the CSS rules to 
provide the illusion of pixel manipulation. 
var node = document.createElement(“span’’) ; 
node.style.marginTop = (1i*2)+”’mm’; 
node.style.opacity = (1/100)+.5; 


5. Apply node to drip 
Each node generated within the ‘for loop of Step 3 is 
required to be added to the drip. A query selector is 
performed on the ‘document’ to search for the element 
using the drip class, uoon which ‘appendChild’ is used to 
attach the node created in Step 4. 

document .querySelector(“.drip”). 
| appendChild (node) ; 


6. CSS: HTML body 


Create a new file called ‘styles.css. This step sets the 
HTML document and its body section to cover the full 


screen without any visible border spacing. The body has 
its background set to have a picture sized to cover the 
full available space. 


7. Drip container 
The drip container uses absolute positioning so that it 
can be moved by the applied ‘outAnim’ animation. Its 
height is set to 50 per cent of the view height (vh), with 
the animation duration set to loop infinitely over a 
duration of five seconds. 

.drip{ 

position: absolute; 

display: block; 
height: 5Qvh; 
- animation: outerAnim 5s ease-in-out infinite; 


I 


8. Drip: droplets 
The effect is made by applying the same background to 
the child elements inside the drip container. These are set 
to cover the full width, but only at a height of 5mm. A 
Slight blur is applied as part of the distortion effect. The 
‘innerAnim’ animation is also applied to adapt these items 
during the animation. 

drip > *{ 
- position: absolute; 

display: block; 

width: 10@vw; 

height: 5mm; 
filter: blur(2px); 

background: url(background. jpg) 

rgba(@,@,0,.5); 
| background-size: cover; 


| animation: innerAnim 5s ease-in-out infinite; 
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9. Drip/droplet animation 

Two animations are defined for the animation. While the 
‘outerAnim animation is responsible for moving the drip 
container in and out of view, the ‘innerAnim’ adapts the 
portion of the background shown by the inner child 
elements. These combine to produce the changing 
‘distortion’ effect. 

@keyframes outerAnim { 

Q% { opacity: @; top:@; } 

20%{ opacity: 1; } 

100% { top: 10@vh; opacity: @; } 

& 


@keyframes innerAnim { 

_ from { background-position:@ -100%; } 
to { background-position: @ Q;} 

Bi 
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UNLEASH THE POWER OF 


WEBGL 


WITH 


THREE.JS 


Learn how to create realistic 3D scenes on the Web 


xplore alien landscapes, underwater 
} worlds or ancient gauntlets. Interact 
with life-like models that speak and react 
as you engage with them. Build beautiful 
cinematic sequences to launch into a new game 
| or website. Learn the latest features of anew 
computer by viewing it from every possible angle, 
or dive into an exploded view. Imagine a site for a 
new car, where you could examine each part in as 4 
much detail as you wish, then watch it reassemble > 
before your eyes. Turn on your VR headset, get 
behind the wheel and take your customised car 
for a spin. All of this is possible and so much more 
using WebGL, all right in the browser without 
plugins. 3D models are at the heart of these 
amazing experiences. This article is going to 
explore using 3D models in WebGL, and create 
beautiful results. We'll show you data formats, 
. performance considerations, resources and how 
to get started. Using the popular Three.js library, 
you'll learn about importing and using models, 
lighting and textures to enhance surface detail, 
the importance of environmental maps and 
optimisation tips to help your project run 
smoothly. You'll be a able to follow along, making 
your own 3D scene. You'll load primitives to start, 
then exploring model loading and techniques to 
make your scenes more photo-realistic. More than 
enough to get started and plenty to fuel your next 
projects, with a few tips as well. Many of the 3D 
principles that you will learn here are relevant in 
any other 3D library or environment. 
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“Every image, every scene, can tell 
a story. Advanced WebGL now 
enables photorealistic, interactive 
rendering that can reach mass 
audience through the web without 
plugins. It’s an exciting time to be 
in web development and VFX” 


Richard Mattka 
Award-winning interactive director, author, VFX artist 


WEBGL WITH THREE.JS 


How well is WebGL 
3D supported? 


Up until the past few years, the biggest obstacle 
to developing in WebGL was the lack of 
device-wide support. Every killer interactive 
pitch was met with the daunting question: 
“Great, but will it run on mobile, or do we have 
to serve up some second-rate fall-back 
experience?” Desktop support was getting there 
for some browsers, but not all, and mobile was a 
deal-breaker for most professional projects. 

Fast-forward to 2018, and with advances in 
device hardware and processing, we now have 
gorgeous displays with incredibly powerful 
processors. Browsers support WebGL natively 
with overall support closing in on 95%, virtually 
100% on all major devices and browsers 
(https://caniuse.com/#search=webg)). 

WebGL is now integrated into web standards, 
allowing physics, image processing and effects 
as part of the webpage canvas, all GPU- 
accelerated! That means amazing real-time 3D 
graphics, powerful effects via Graphic Shaders 
and immersive video are all possible. Complex 
models with high levels of detail, reflections, 
environmental maps, shadows - all possible. 
This requires no special plugin or downloads. All 
users now have instant access to beautiful 
experiences right in their browser and right in 
the palm of their hand. 
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“JavaScript libraries 
abstract away the 


complexity of WebGL 


and allow you to 
create real-time 3D 
content in a much 
easier manner” 


feature 


What 3D are we talking about? 


There is more than one way to get 3D on the web 


WebGL is a JavaScript API based on the OpenGL 3D 
graphics standard, allowing JavaScript plugin-free 
access to the graphics hardware, via 

the HTML5 <canvas> element. WebGL enables 
real-time 3D graphics in webpages. 


WebGL 

A Web Graphics Library is a JavaScript API for 
rendering interactive 2D and 3D graphics within any 
compatible web browser without the use of plugins. 
WebGL programs consist of code written in 
JavaScript and shader code that is written 

in OpenGL Shading Language (GLSL), a language 
Similar to C or C++, and is executed ona 

computer's graphics processing unit (GPU). 

WebGL can display complex images, animations 
and physics simulations all super fast inside a canvas 
element. It is a web standard, designed and 
maintained by the non-profit Khronos Group. 


CPU vs GPU? 

Why would you want to take advantage of GPU over 
CPU for rendering your 3D scenes? In a word, power. 
Even for your 2D work, you want this power. 

The Graphics Processing Unit (GPU) is designed 
specifically for rendering graphics, where the CPU is 
a generalised work horse. The GPU is really good at 
compute-intensive operations, such as video renders 
and physics simulations. 


3D Libraries vs native WebGL 

Since WebGL is a low-level API, it can be challenging 
to use. You need to write hundreds of lines of code 
to perform basic tasks. JavaScript libraries abstract 
away the complexity of WebGL and allow you to 
create real-time 3D content much more easily. For 
2D work there is PixiJS, Phaser, EaselJS and many 
others. For 3D, Three.js and BabylonJS are great 
options. A-Frame uses Threejs and WebGL elements 
allowing you to create webVR experiences. 


Three.js 

Threejs is an open source 3D library created by 
Ricardo Cabello AKA Mr Doob. It’s focused solidly on 
3D with an excellent library of components, classes 
and tools. It also boasts a very active community 
and extensive documentation. It is feature-rich, 
flexible and has excellent performance, making it a 
good choice for development. 


Real-time rendering 

Real-time rendering offers some pretty significant 
advantages over pre-rendered scenes. Games 
require constant interaction between player input 
and what is rendered. Web experiences that allow 
users to direct the action, move the camera and 
objects all leverage rep-time rendering. WebGL 
allows real-time rendering right in the browser, 
without plugins. 


Anatomy of a 3D scene 


The Scene 

A scene is a container object that encapsulates all 
the other objects and elements that we wish to 
show. Think of it like an empty stage we are going 
to film. 


Like filming a movie, we need a camera to capture 


the action. It can move, tilt, pan and zoom. Three js 


has a few different camera classes, including a 
Perspective Camera, which we will use for 3D, and 
an Orthographic camera used for rendering 2D 
scenes or UI elements. For this article we are most 
interested in the Perspective Camera. 

You can define the Field of View (FOV), which is 
the extent of the scene that is seen on the display 
at any given moment. The aspect ratio is typically 
the width of the canvas element divided by the 
height. You can also define the near and far 
clipping planes, which define what is rendered by 
the camera. 


The Renderer handles the display of the 3D scene 
using WebGL. It targets a HTML <canvas> element 
to draw into. You can define the size at which you 
want it to render your scene as well. Typically this 
will be set to include the width and height of the 
browser window. 
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3D Objects. 


3D Objects are comprised of geometry, materials 
and can be transformed in 3D space. 


A model's geometry defines the vertices or points 
of an object. The faces created by these vertices are 
also defined, which will be filled by a material. 
Geometry can be primitives such as spheres, 
cylinders and cubes. It can be defined manually 
through code or as custom shapes. It can also be 
loaded from external files exported from 3D 
modelling software. 


Materials are used to texture the faces of an object’s 
geometry. Three.js comes with several materials, 
such as Normal, Basic, Lambert, Phong and Shader. 
Attributes include things such as textures maps, 
colour, opacity, roughness and enabling 
morphtargets for animations. 


A mesh is an object that combines geometry, and 
applies a material to it. Once created this can then 
be inserted into a scene and moved around. This 
object is what we would typically think of as a 
physical object because it now has enough 
information to be seen. 
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Your first 3D scene 12 bes: way to learn is by seeing. Get the code from filesilo.co.uk 


1. Get HTML ready 

To begin, you need somewhere to see your 3D 
scene. Set up a basic HTML file and include a link 
to Three.js, either hosted externally or add it from 
the Three.js repository here: https://github.com/ 
mrdoob/Three.js. 

Note: This code has been tested on the latest 
release of Three.js v91. 


2. Add a scene, camera and renderer 

To start add a scene, which will contain all the 
objects. Then add the camera. The first attribute is 
the field of view. The second is the aspect ratio. 
You can also define the near and far clipping 
planes in the third and fourth attributes. Last, add 
the renderer, which handles drawing the scene 

to the canvas. 


3. Adding objects 

Three.js includes a number of primitive 
geometries to get you started. Instead of the 
typical cube or sphere, we'll try out a Torus Knot. 
To create one, we needa 
TorusKnotBufferGeometry. The first two 
attributes are torus radius and tube radius. The 
next two are the tube segments and radial 
segments, which determine the amount of 
divisions or faces will be made along the surface. 
The more segments a curved surface has the 
smoother the curve will appear. The last two 
values are for the times the geometry winds 
around the axis of symmetry and interior torus 
circle. Playing with these last variables can 
generate some very cool results. 

In addition to the geometry, we need a material. 
Let’s use a MeshNormalMaterial first. This way we 
can see the object without needing to light it. 

The third thing we need is a Mesh created using 
the geometry and material we defined. 

Note: By default, when we call scene.addQ, the 
object is placed at (0,0,0). To avoid the camera 
and the object being in the same location we can 
simply move the camera back a little. 


4. Add animation render loop 

The animation loop, sometimes called a render 
loop, is called ideally 60 times per second. Film 
runs at 24 frames per second (FPS) which is fast 
enough to trick the eye into seeing constant 
motion without interruption. In computer 
animation we aim for at least 30 FPS but ideally 
60 FPS to achieve the same result. This ensures 
very smooth visual performance even if frames 
are dropped periodically. 

We bind this animation loop to the 
requestAnimationFrame function, which does two 
things. First, it ensures the browser is ready to 
render the next frame. It also means animations 
can pause rendering when the user is no longer 
viewing that browser tab. 
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Add the code you find on FileSilo to render the 
scene in an animation loop. Now when you run 
your code you should see a nice torus knot object 
rotating in the centre of the scene. 


5. Apply light 
reactive materials 
We used normal materials initially so you could 
see the object’s shape without the need for lights. 
You will rarely use that material, except for testing 
purposes, so let’s add some real materials next. 
Let’s use a Standard material. Tweak the size and 
position of the object as well to give us some 
room for next steps. 

Update your object code block to look like the 
code on FileSilo.co.uk. 


6. Add lights 

We can't see the objects anymore if we rerun the 
code now, because there are no lights in our 
scene. Let’s add some lights. An ambient and two 
spots. Now you have something that looks much 
better. A smooth metallic object with highlights 


and shadows along its curves. 


7. Apply textures 

Textures create the surface look that skins the 
mesh. Let’s try adding an image texture. We use 
the built-in TextureLoader class to load the 
external image file. We can set the X and Y (width, 
height) wrapping style of the texture as well as the 
number of times it repeats as it wraps the mesh. 


Note: We added in some new attributes for ‘map’ 
(which is the main image texture), as well as 
roughness and metalness values. 


You should end up with a nice detailed texture 
surface now that could pass for a metallic or cool 
polished marble style look, depending on your 
image texture. 

There is much more you can do to 
continue adding to this, including specular 
environmental maps, and bump maps. You can 
also load more complex models created in 
external 3D applications. 


The different types of light for 3D scenes 


Lights are what allow us to see our objects in 3D. 
Light rays, like in the real-world, emit from a source 
and interact with objects, absorbing, passing 
through and reflecting, depending on the surface 
it interacts with. We can see texture details, 
Shading, intensity and colour. 


Spot lights emit their light from a single source 
point in one direction, following a cone shape that 
spreads the further it gets from the source. So if 
you like that effect, you can position this light close 
enough to see the circular pattern it creates on a 
Surface, much like a spot light at the theatre. 


Point lights emit from a single point in all 
directions. Cool for little fireflies or magical lights 
that ambiently move in a scene. Or more 
practically, a bar light bulb. 


Directional lights emit in a specific direction as 
though it is infinitely far away. The light rays are 
all parallel instead of a cone shape. This is much 
like sunlight in a scene. The sun is far enough 
away that its rays are essentially infinite and 
parallel in a scene. Use this light if you want to 
emulate sunlight. 


How to create realistic details 


One key element for realistic scenes in 3D are 
Shadows. To add shadows to your scene we need to 
tell the renderer to use shadows. Add this code just 
after declaring the renderer: 

) renderer.shadowMap.enabled = true; 
renderer.shadowMap.type = THREE. 
PCFSoftShadowMap; // default THREE. 
PCFShadowMap 

Next, update the spot lights. Add this after declaring 

each light: 
light.shadow.mapSize.width = 2048; 
light.shadow.mapSize.height = 2048; 

Next, add in the object's ability to cast a shadow 

after you declare it: 

| object.castShadow = true; 

Last, if you dont Nave one add in a ground plane or 

something to cast shadows onto. Note: We set its 

property to receive shadows and we use a physical 
material (StandardMaterial) for optimal realism with 

Shadows and shading. 
var planeGeometry = new THREE. 
PlaneBufferGeometry( 50, 50, 32, 32 ); 
var planeMaterial = new THREE. 
MeshStandardMaterial( { color: Q@xaaffaa } 
VE 
var plane = new THREE.Mesh( planeGeometry, 
planeMaterial ); 
plane.rotation.x=Math.PI/180«-9@; 
plane.position.y=-2; 
plane.receiveShadow = true; 

® scene.add( plane ); 

If you rerun your tutorial code you should see your 

new shadows. 


Bumps maps add amazing surface detail. They are 
best suited to fine details, like scratches, ridges and 
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fine granular detail. You can use them to create 
complexity that would require thousands of vertices 
and faces otherwise. To add bump maps, simply 
export a bump map from your 3D modelling tool as 
an image and assign it like any other map, targeting 
the property called bumpMap. 
var sphereMaterial = new THREE. 
MeshStandardMaterial( { map:texture, 
color: Qxeeddff, 
roughness:.9, metalness:.5 }_ ); 
One thing to note is that bump maps only simulate 
the changes in surface definition. The underlying 
geometry is unchanged. So things like shadows cast 
by the object would not reflect that detail. They also 
are not specifically mapped to the model, so they 
may not look great at all angles, depending on the 
effect you want. 


bumpMap:textureBump, 


Normal maps are better than bump maps in that 
they orient to the model. Like bump maps they 
fake the geometry changes through altering the 
normals that define how light is reflected from the 
material. Because they are not tillable textures like 
bump maps typically are, they are tricker to edit 
and are usually created in your 3D app when you 
export. They are applied like bump maps, using 
the normalMap. 


These maps are the route to go for surface details 
that need to be altered in a way that affects the 
underlying geometry. So terrain maps work like 
this, rising sand dunes or mountains that can be 
applied to an otherwise flat plane. If you have heavy 
Surface lifting to be done, try to use displacement 
maps. Use the dispalcementMap attribute of the 
material when assigning. 
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Loading models 


For more complex models, characters and scenes, 
you need to use a 3D modelling application and 
then import your models into Three js... 


There are many great 3D modelling applications 
including Maya, Cinema 4D, CLARA.IO and Blender. 
You can use any that works best for you. Blender is 
free, open-sourced and Threejs comes bundled with 
a plugin to export directly from Blender into a JSON 
format which can be loaded into Three.js. You can 
download Blender at blender.org. The version we 
are going to use is 2.79. 

The exporter can be found in the utils directory 
on GitHub here: https://github.com/mrdoob/three. 
js/tree/dev/utils/exporters/blender. Copy the io_ 
three folder into the scripts/addons folder of your 
Blender installation. There are more details if you 
need them on the Threejs plugin page. 

Inside Blender, go into the File menu to User 
Preferences then select the Add-ons tab. Then 
check Import-Export>T hreejs Format. You can then 
use it anytime via File>Export>Three.js to generate 
the JSON format. 


You have your JSON file and now you need to load 
it into your Three js app. You can do this using the 
JSONLoader class. Just like the TextureLoader, you 
call loadQ on the object, passing in the URL to the 
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Three.js 

https://threejs.org 

Loads of examples, code and extensive 
documentation to get you going. 


Blender 
https://www.blender.org 

Blender is a free, open-source 3D 
application with a Three.js exporter. 


Turbo Squid 
https://www.turbosquid.com 
Professional 3D model library with wide 
range of excellent models. 


1 f 
% 
" 4 , 
7 y 


file as well as a callback method. 
var loader = new THREE.JSONLoader(); 
loader. load(‘lightsaber.json’, loaded); 
The callback returns the loaded geometry and any 
materials that go with it. The materials are an array 
of materials and you can use them by passing them 
into the MultiMaterial class. Then you can proceed 
to create your mesh with the geometry and your 
material as USual. 
function loaded(geometry, materials) { 
var material = new THREE. 
MultiMaterial(materials); 
mesh = new THREE.Mesh(geometry, 
material); 


scene.add(mesh); 
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Why you ll love Clara.io 


Clara.io 

https://clara.io 

3D modelling, animation and rendering app 
that runs in browser and exports to Three.js. 


Three.js Editor 
https://threejs.org/editor 

Browser-based editor built by Three.js, with 
rendering, import and export tools. 


MeshLab 


http://www.meshlab.net 
Optimise models, reduce vertices and faces, 
edit, clean and heal your models. 


Environment maps 


As highly reflective surfaces, metals and plastics 
reveal the world around them. To map that world 
onto the mesh, you need to use environmental 
maps. Even rough, rocky textures often bounce 
back some of the ambient light around them even if 
its diffused. To load an environmental map, you 
need to create a special box for the map, using a 
classic skybox model. The textures for these can be 
tricky to setup, but there is plenty of places to 
source these, and you can make your own. Even 
Standing out in the general environment you want 
to place your object and photographing the 360 
image yourself is great. Once you have the image 
set you'll load them in like this: 

} var envMap = THREE.ImageUtils. 
loadTextureCube( L ‘assets/landing/envl. 
jpg’, ‘assets/landing/env2.jpg’, ‘assets/ 
landing/env3.jpg’, ‘assets/landing/env4.jpg’, 
‘assets/landing/env5.jpg’, ‘assets/landing/ 
env6.jpg’ J ); 
envMap.format = THREE.RGBFormat; 
envMap.mapping = THREE. 

CubeRef lectionMapping; 

Then simply add to your material properly like other 

maps like this: {envMap: envMap} 


Graphic shaders 


Cool colour effects, blurs, glitches and complete 
animations. These are highly performant and can be 
applied as a custom material called a ShaderMaterial 
instead of image textures. They can also be used as 
post-processing effects applied on top of your entire 
scene. Vertex shaders get in a step ahead of Frag 
shaders and can be used to manipulate the position 
data of vertices. This allows you to manipulate the 
model itself on a granular level via code in a highly 
optimised way. Particle effects, swarms of objects or 
points, clouds and volumetric simulations are just a 
few possibilities. 

Combining conventional models and techniques 
with graphic shaders can open a world of options to 
enhance your scene. 


Animation 


Flickering and moving lights, moving the camera, 
and transforming the objects in 3D space all add life 
to a scene. Watching lights and shadows dance off 
objects, and seeing environments reflect in their 
Surface add depth and realism. 


In 3D modelling applications such as Blender, you 
are able to rig your models. This means joints and 
a system of bones can be created to underlay a 
mesh. With good design, complex models can be 
created that move realistically as joints are rotated 
and moved. 


You can create animation sequences as well, that is 
pre-defined clips or coordinated motions, such as 
wave, Walk, or jump. In your export process you can 
also export these animations. Three js is able to use 
what are called Morph Targets when loading models 
‘{“Morphtargets”true} and expose these through its 
builtin animation class. You can then run these 
animations using a play/pause approach, even 
adjusting speed as needed to tweak out the 
animation look. 
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WITH REACT 
AND JSX 


REACT IS ONE OF THE MOST POPULAR 
FRONT-END FRAMEWORKS OUT THERE, 
AND ITS JSX SYNTAX OFFERS A 
POWERFUL WAY TO AUTHOR REUSABLE 
COMPONENTS WITH COMPLEX 
FUNCTIONALITY WHICH REMAINS 
EASILY READABLE... 


React makes it painiess to create interactive Uls. 
Design simple views for each state in your 


application, and React will efficiently update and 
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oullding user interfaces 


Get Started Take the Tutorial 


complex Uls. 


render just the nght components when your data 


changes. 


Declarative views make your code more 


predictable and easier to debug. 


Unless you've been marooned on a 
desert island for the last few years, 
youve probably heard of React. 
Created by Facebook in 2013, it 
remains to date arguably the most 
popular front-end framework. Like 
most other current frameworks, React 
enables you to create modular web 
apps using ‘components;, which 
makes it much easier to build and 
maintain large scale apps. Unlike some 
other popular frameworks, like 
Angular, React is focused only on 

the user interface (the ‘view’ in an 
MVC framework). 

In years gone by, one of the major 
challenges with web develooment was 
managing the complexity as projects 
grew larger. The lack of a 
Straightforward module system, and 
difficulty with scoping, meant that it 
was very difficult to create and 
distribute reusable code. As a result, 
enabling the creation of components 
is a cornerstone of modern web 


Since component logic is written in JavaScript 


instead of templates, you can easily pass rich 


the DOM. 


frameworks. The key purpose of 
developing in this way is to let you 
split your app into reusable pieces 
that you can think about 
independently. In practice, the end 
goal of these custom components is 
to let you encapsulate complex 
behaviour within your own custom 
elements that can be embedded 
within a page. Think of how <video> 
hides significant underlying 
implementation, and now imaging 
creating <my-element> with your 
own functionality. 

These components need to include 
presentation (HTML/CSS) and 
functionality JavaScript) in a single, 
simple package. 

React provides a way of creating 
components like this, but also provides 
various other features to help build 
maintainable, functional and fast user 
interfaces. Notably, it offers its own 
approach to rendering that is very 
efficient, meaning the user interfaces 


Build encapsulated components that manage 


their own state, then compose them to make 


BUILD COMPONENTS WITH REACT AND JSX 


W16.4.0 


Github 


We don't make assumptions about the rest of 


your technology stack, so you can develop new 


features in React without rewriting existing code. 


data through your app and Keep state out of 


you create should be highly 
performant. It’s also typical that 
alongside React itself, you'll utilise an 
extension of JavaScript called JSX, 
which provides additional syntax to 
make building components much 
more straightforward. 

Many consider React to have a bit 
of a learning curve. The difficulty for 
most developers comes with 
understanding its component state 
and props model, which requires you 
to design and think about data flow in 
an app slightly differently to how you 
might have done traditionally. The 
good news is that, in terms of 
language syntax, JSX itself is a very 
Straightforward extension of 
JavaScript. For the most part, what 
you write will feel very familiar, and 
you dont have to learn some of the 
syntactic specifics you'd need to get 
to grips with if you used Angular. You'll 
more or less get your head around 
how JSX works on the first reading. 


React can also render on the server using Node 


and power mobile apps using React Native. 
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BUILD COMPONENTS WITH REACT AND JSX 


React components are essentially 
JavaScript classes with a renderQ 
function that returns content to 
display. The library ships with a React. 
Component class that you extend to 
create your own custom components. 
| class MyComponent extends 

React.Component { 

render() { 

return ( 

(i eee 

DF 

at 

export default MyComponent; 
The code above will create a new 
component that can be instantiated 
using the element <MyComponent>. 


me SS a a a EET 


DOM manipulation is a key part of 
implementing functionality on the 
web, as it’s required to change what 
the user sees on the page. 
Unfortunately, it’s a fairly slow 
operation to perform. Some 
front-end frameworks will rebuild 
the entire DOM when a change is 
made to an element on the page, 
which is very inefficient. 

React offers a very different solution 
to this problem. It maintains 
something called ‘virtual DOM, which 
is a representation of the app’s actual 
DOM. The virtual DOM has all the 
Same objects and properties as the 
actual DOM, but isn’t drawn on the 
screen. When a change is made to a 
React element, it rebuilds the entire 
virtual DOM - but this is much quicker 
than updating the actual DOM since 
nothing is actually drawn on the page. 

What happens next is the clever 
part. React compares the new virtual 
DOM with a snapshot taken before it 
changed, to determine which objects 
changed (diffing)). It then updates 
these objects, and only these objects, 
on the actual page. Critically, React will 
do this for you automatically if certain 
attributes of a component are 
changed, so you don't have to 
manually tell it to re-render 
components. This process enables 
React to draw page updates very 
quickly and efficiently. However, it 
increases the memory consumption 
of pages due to the maintenance of a 
Separate virtual DOM tree. 


Note that where vanilla elements like 
<div> are always lowercase, React 
elements are capitalised. 

There are a couple of interesting 
things going on here. Firstly, the entire 
presentation of the component is 
provided by the renderO method. This 
means that your markup and scripting 
will be combined into a single 
JavaScript file, rather than keeping 
them in separate HTML and JS files. It 
also means that it’s a lot easier to 
define complex behaviour of a 
component, because you can define 
exactly what the component displays, 
conditionally if you like, within the 
renderQ function. 
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MANIPULATION IS © 


A KEY PART OF 
IMPLEMENTING 


FUNCTIONALITY ON 


THE WEB" 
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<APP/> 


<Search/> 


<ResultsList/> 


<ContentPanel/> 
<Results/> 
<Contentitem/> 


<Results/> <Contentitem/> 


<Results/> 


<Results/> 


<Results/> <Contentitem/> <Contentitem/> 


<Results/> 


Virtual 
DOM 


\ eZ 


Let’s think about the renderQ function 
in our React component. Using vanilla 
JavaScript syntax, it’s a bit 
cumbersome to have this 
return presentation for the 
component, since we'd | 
need to manually 
construct a 
DOM tree. 
Therefore, in 
almost all cases, 
React components 
are built using an 
extension of JavaScript 
called JSX. JSX is best 
thought of as a templating language 
that allows you to include markup in 
your JavaScript. Let’s take a look at a 
simple component: 


>) My OMPDOI , | 


When we build our app, the HTML 
syntax within the renderQ function is 
actually compiled to: 


nent 


When it was first unveiled, some 
developers felt this JSX syntax 


STYLING AND JSX 


There are a few different ways you can 


incorporate styling into JSX 
components, each with their own 
advantages and disadvantages. The 
most straightforward is to simply 


import a CSS file into your component 


and use className to attach styles to 
elements in the JSX. You could also 
use inline styling. You might think this 
is bad for readability and 
maintainability, but those issues can 
be solved by declaring the styles as 
const objects, which JSX can resolve 
as variables within the markup. Or you 
could use styled-jsx (www.npmjs. 
com/package/styled-jsx) which 
introduces JSX support for a <style> 
tag within the renderQ function. 


TIP 


You'll notice React uses 
className instead of class for 
DOM elements. This helps 
avoid confusion between 
JSX’s extended syntax and 
JavaScript’s native 
class keyword. 


represented an anti-pattern since 
markup and scripts were traditionally 
kept separated. However, since the 
_ component itself is reusable 
without duplicating code, it 
doesnt introduce the 
problems you might 
expect. Furthermore, 
it lends itself to a 
very readable style, 
since you can quickly 
see the functionality 
of a component 
described clearly ina 
single file. Also remember 
that React is still only dealing with 
presentation, so the scripting you 
write here is only to support the user 
interface and wont include any 
application logic. It’s possible to use 
React without JSX if you want, but it’s 
uncommon to do so. 

As well as using built-in elements, 
we can alSo USe Our Own custom 
elements within JSX markup to 
‘nest’ components: 


Now consider how this can help us 
more easily define behaviour for a 
component. JSX offers a few features 
that allow us to do this. We can 
evaluate JavaScript expressions within 
JSX markup by embedding them in 
curly brackets. For example: 


More practically, this allows us to 
display variable content held by the 
component. React components hold 
data either as ‘state’ or ‘props’ (more 
on this latern, which we can evaluate in 
this way. 

For conditional functionality, we 
can't use if/then clauses within curly 
brackets, but we can use conditional 
expressions (x ? y : Z). Alternatively, we 
could place the logic outside the 
markup and have multiple return 
clauses for the renderQ function. 

We can also embed function 
responses within our JSX markup. 

For example: 


This enables you to start to break 
down complex rendering functionality 
into manageable units. The ability to 
embed functions also means it’s easy 
to iteratively render components, 
which is typically done using the 
mapO function. 
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BUILD COMPONENTS WITH REACT AND JSX 


‘GETTING STARTED WITH REACT 


To get started with React, you'll 
probably want to use create-react- 
app, an npm package which sets 
up a new React app with all the 
tools you'll need to get started, 
such as support for JSX. 

Firstly, install the latest versions 
of Node.js and npm from https:// 
nodejs.org. Then run at the 
command line: 

J] npx create-react-app 


new-react-app 

cd new-react-app 

npm start 
This will kick off a local web server 
running a new React app. You can 
modify from there. If you navigate 
to the src folder, you'll see some of 
the basics of how a React app is 
set up. In index.js, which is what 
the web server runs when started, 
youll find an instruction for the 
React DOM to render an <App/> 
component: 

ReactDOM.render(<App />, 

document. 

getElementBylId(‘root’)); 
If you look in App.js, you see the 
contents of this component, 
including the renderO function 
with JSX syntax describing what 
the component should display. 
This corresponds with what you 
can see in the browser. Notice 
how styling is imported asa 
dependency for the component at 
the top: import ‘./App.css’; 


it for React. 
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BUILD COMPONENTS WITH REACT AND JSX 


REACT NATIVE 


React Native is another offering 
from Facebook which enables the 
component model and JSX 
syntactic style of React to be used 
for native mobile development. 
React Native projects create 
mobile apps which are 
indistinguishable from those 
written in Swift, Objective-C 

or Java. 

This can reduce the learning 
curve for developers who are 
familiar with React and JSX to 
begin creating native mobile apps. 
Many companies have separate 
departments for web and native 
mobile build since the skillsets 
were traditionally different, but 
React Native offers the possibility 
for a single skillset to be used for 
all front-end development. 

This shouldn't be confused with 
a single code base for web and 
native development - that isn’t the 
objective of the framework, and 
React Native apps will differ from 
React apps. Rather, Facebook aims 
to allow developers to learn one 
style of development and use it 
across every platform. It is, 
however, possible to share certain 
portions of code and application 
logic between React and React 
Native projects. 

React Native also takes care of 
the differentiation between iOS 
and Android for you, so you don’t 
need to maintain separate code 
bases for each mobile platform. 

And if you're feeling 
adventurous, as well as React 
Native, Facebook have also 
launched React VR which allows 
you to use similar syntax for VR 
development. Exciting times. 


As we've alluded to, the real power of 
React components come from React’s 
model of props and state. Props area 
means of passing information into a 
component when it is created. Let's 
refresh our example component: 

class MyComponent extends 

React.Component { 

render() { 

return ( 

<div> 

<h1l>{this.props.title}</h1> 

{this.props.content} 

</div> 

; 

i; 


3 
Here, were using JSX’s JavaScript 


expression evaluation to use the this. 
props.” variables. But where co they 
come from? This is very 
Straightforward. We can pass the 
props as attributes when we use our 
custom element. For example: 
<MyComponent title=“Hello 
World!” content=“This is my 
first React component.”/> 
What this means is that in a 
hierarchical tree of components 
(which is how React apps are 
ultimately composed), the parent 
component can specify content or 
behaviour of the child. The child 
component cannot modify : 
its own props, but if the 
parent component 
makes a change to 
them, it will 
re-render the child. 
React does this 
automatically, so 
you can update 
how the component 
is displayed to the 
user just by modifying 
its props. This means you 


Parent Component 


Child Component 
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You might have heard some 
controversy around React’s 
licensing agreement. Prior to 2017, 
React had a unique license which 
some felt granted inappropriate 
empowerment to Facebook. 
However, this is no longer an 
issue as React now uses 
the MIT license. 


can build reusable components which 
Support data flow downward through 
a component hierarchy. 

This is useful, but it isn't all we need. 
Most components will also want to 
encapsulate some internal 
implementation details, which in React 
terms we call ‘state’ State can be set 
and modified within a component: 
class MyComponent extends React. 

} Component { 

constructor(props) { 

super(props); 

this.state = { 

title: “Hello World!”, 

content: “This is my first 

React component.” 

i) 

} 

render() { 

return ( 

<div> 

<hl>{this.state.title}</h1> 

{this.state.content} 

</div> 

De 

} 

} 


In this example, we've set the 
components state initially in its 
constructor (the function called when 
it's created). We can modify it later on 
with the this.setStateQ 
» function. Changes in 
State also re-render 
the component. 
So now we 
have two ways 
to handle data 
in React - one 
to store it within 
a component, 
(state) and one to 
pass it down into a 
new child 
component (props). 
Generally you should use 
State sparingly and aim for most of 
your components to be stateless. 
State is internal to the component 
and cant be accessed elsewhere, 
including in a component's parent. 
This means that for most apps we 
need something else to handle 
interaction between child and parent 
components. Let’s say we have a child 
component with a button, and we 
want the button to trigger some 
action in the parent component. 
What we need is an event which the 


parent component can receive and 
respond to. 

With JSX, we can pass functions as 
expressions to an event handler, like 
this code: 

<button> 

onClick={handleClick}>Click me! 

</button> 


We can then define a handleClickO 
function which is called when the 
button is clicked. But what if we want 
our custom component to respond to 
onClick events? 
class ParentComponent extends 
React.Component 
fi 
render() { 
return ( 
<ChildComponent 
onClick={this.handleChildClick} 
label=“Click me!/> 
); 
} 
handleChildClickQ) { 
Lies 


I 


What we're actually doing here is 
passing the parent component's 
handleChildClickOQ function to the child 
component as a prop called onClick. 
The child component can then call the 
function using this prop: 
class ChildComponent extends 
React.Component { 
render() { 
return ( 
<div> 
Here is a button: 
<button onClick={this. 
props.onClick}>{this.props. 
label}</button> 
</div> 


): 


Between the ability to pass props to a 
component, have it maintain its own 
State, and allowing events to be 
passed to parent components, you 
should have most of what you need to 
begin developing user interfaces in 
React, taking advantage of JSX syntax. 
To understand how to build more 
complex applications with this model, 
it’s worth looking into the Flux design 
pattern which Facebook have 
developed for use with React. 
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e’re going to be creating the layout 
for a page that includes a 
newsfeed and alittle chat box in 
the corner. To co this we'll leverage 
the following features to create a better experience and 
work around some issues. You'll need Chrome 65+ or 
PiIrFetOx Sor. 

- display: contents; 


- @supports(...) {...} feature queries 
- overscroll-behavior: contain; 

:focus-within and :placeholder-shown 

pseudo-classes 

contain: paint; 
There is a repo to accompany this tutorial which contains 
the step-by-step code: https://github.com/danielcrisp/ 
hot-new-css-features 


1. The HTML for the newsfeed 


First we need to set up some super simple, repeating 
markup for our newsfeed. Let’s create a “container div 
with an unordered list inside. Give the ‘<ul> the class of 
‘feed’, then create 10 list-items each containing a div with 
the ‘card’ class and the text Card 1, Card 2 etc. Finally 
create another list-item in between 5 and 6 with a class of 
‘nested’ - this will be helpful later - and add a ‘<ul> inside 
with three listitems using the text Card A, Card B etc. 
<body> 
<div class=”container”> 
<ul class=” feed’’> 
<li><div class=”card”>Card 1</div></1li> 
<li><div class=”card”>Card 2</div></1li> 
<li><div class=”card”>Card 3</div></1i> 
<li><div class=”card”>Card 4</div></li> 
<li><div class=”card”>Card 5</div></1i> 
<li class=’nested”> 
<ul> 
<li><div class=”card”>Card A</div></1li> 
<li><div class=”card”>Card B</div></1li> 
<li><div class=”card”>Card C</div></1i> 
</ul> 
</li> 
<li><div class=”card”>Card 6</div></1i> 
<li><div class=”card”>Card 7</div></1li> 
<li><div class=”card”>Card 8</div></1i> 
<li><div class=”card”>Card 9</div></1i> 
<li><div class=”card”>Card 10</div></1li> 
</ul> 
</div> 
</body> 


2. Style the newsfeed 


Now we need to add some quick styles so that this starts 
to look more like a newsfeed. First we can give ‘<body>’ a 
Subtle grey background colour. Then give “container a 
max-width of 800px and use ‘margin: O auto; to centre 
align it. Let’s also give ‘card’ a white background, 1Opx of 
padding and margin and finally a min-height of 300px - 
this should give us enough to make the page scrollable. 
Lastly we'll sprinkle some flexbox magic on the ‘feed’ to 
make the items flow nicely with two cards per row. 


| .feed { 
display: flex; 


flex-wrap: wrap; 
} 

.feed li { 

flex: 1 @ 50%; 


I 


3. display: contents to the rescue 

If you scroll down the list you'll notice that our cards in the 
nested list, Card A - C, are causing some layout problems. 
Ideally we'd like them to flow in with the rest of the cards 
but they are all stuck together in one block. The reason 
for this is that a flex container - which is created using 
‘display: flex’ - only makes its immediate children, ie the 
list-items, into flex items. 

Now, normally the only way of fixing this is to change 
the markup, but let’s pretend that you don't have that 
luxury. Perhaps the newsfeed markup is generated by a 
third-party script or it’s legacy code that youre only trying 
to reskin. So how can we fix this? 

Meet ‘display: contents’ This little one-liner essentially 
makes an element behave as if it isn't there. You still see 
the descendants of the element but the element itself 
doesn't affect the layout. 

Because were pretending we cant change the markup 
Gust for this step) we can be a bit smart about this and 
make the ‘card’ elements the flex items and almost 
entirely ignore the list markup. 

First remove the existing ‘feed |i class and then use 
‘display: contents for both ‘<ul>’ and ‘<li> elements: 

.feed ul, 
.feed li { 
display: contents; 
J 
Now you should see the cards flowing in order, but we've 
lost the sizing. Fix that by adding the flex property to the 
‘card’ instead: 
.card { 
flex: 1 @ 40%; 
J 
Tada! Our cards are now using the wonders of flexbox as 
if their structural unordered list markup doesn't exist. 

As aside note you might be wondering why the 
flex-basis value is set to 40%. This is because the ‘card’ 
class has a margin, which isn't included in the width 
calculation as you would expect when using ‘box-sizing: 
border-box. 

As aside note you might be wondering why the 
flex-basis value is set to 40%. This is because the ‘card’ 
class has a margin, which isn't included in the width 
calculation as you would expect it to when using 
‘box-sizing: border-box’ 

So to work around this we just need to 
set the flex-basis high enough to trigger the wrapping at 
the necessary point and flexbox will fill the remaining 
Space automatically. 


4. Perfect solution, right? 

Although ‘display: contents does exactly what we need, it 
is still only at Working Draft status with W3C. And in 
Chrome support only arrived in version 65 released 
March 6th, 2018. Incredibly Firefox has had support since 
April 6th, 2015! 


Developer tutorials 


If you disable the style in DevIools you'll see that 
our changes have made a bit of a mess with the layout 
when ‘display: contents’ isn't applied. So what can we do 
about this? Time for our next new feature - feature 
queries. They work just like media queries but they allow 
you to ask the browser - using CSS alone - if a property 
and value expression is supported. If they are the styles 
contained inside the query will be applied. 

Now, let’s move our ‘display: contents’ styles into a 
feature query. 

@supports (display: contents) { 


.feed ul, 
.feed li { 
display: contents; 
} 
.card { 
flex: 1 @ 40%; 
I 
} 
5. Using ‘not’ fora 
cleaner outcome 


Normally in this kind of progressive enhancement 
scenario we'd use the query to add the new styles, but it 
would also have to disable some of the original styles 
necessary for the fallback layout. 

However you might decide that because support for 
feature queries is pretty good (if you ignore IE) you 
actually want to use the feature query ‘not’ operator. 

It works just like you'd expect, SO we can re-apply our 
Original flex property to the listitems when ‘display: 
contents is not supported: 

@supports not (display: contents) { 
.feed li { 
flex: 1 @ 50%; 
} 
3 


Inside the ‘not query we can add some styles so that the 
‘nested’ items basically re-apply what was being inherited 
by using ‘display: contents’ 
feed li.nested { 
flex-basis: 100%; 
3 
.feed li.nested ul { 
display: flex; 
flex-wrap: wrap; 


I 


6. Taking it one 
step further 
You can already see the potential of feature queries, but 
the really cool thing is that you can combine expressions 
using the three available operators: ‘and’ ‘or and ‘not. 
Perhaps we could also check for display: flex Support and 
then add a float-based fallback. We're not going to do that 
here, but if we were wed first modify the two feature 
queries like so: 
@supports (display: flex) and (display: 
contents) { 


} 
@supports (display: flex) and (not (display: 
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contents)) { 


<li><div class=’message”>Message 10</div></ 


— li> 
} </ul> 
As a bonus you can also test for custom properties </div> 


Support like this: 
@supports (--foo: green) { 


} 
7. Adding a chat box 


Now we have a beautiful newsfeed in place, let’s add a 
little chat box that is fixed to the bottom right of the 
screen. We'll need a list of messages and a text field for 


the user to enter their message. Add this block just after 


the opening <body>’ tag: 
<div class=”chat”> 
<div class=”messages”> 


<input type="text” class=”input”> 
</div> 


8. Styling the chat box 


Time to quickly add some styling so it looks half decent. 


.chat { 

background: #ffFf; 
border: 10px solid #00Q; 
bottom: Q; 

font-size: 1px; 
position: fixed; 

right: Q; 

width: 3Q@Qpx; 


<ul> z-index: 10; 
<li><div class=”message”>Message 1</div></ } 
li> .messages { 
<li><div class=”message”>Message 2</div></ border-bottom: 5px solid #000; 
li> overflow: auto; 
<li><div class=”message”>Message 3</div></ padding: 1px; 
li> max-height: 3QQ@px; 
<li><div class=”message”>Message 4</div></ } 
li> .message { 
<li><div class=”message”>Message 5</div></ background: #000; 
li> border-radius: 5px; 
<li><div class=”message’”>Message 6</div></ color: #fff; 
li> margin: @ 20% 10px Q; 
<li><div class=”message”>Message 7</div></ padding: 1px; 
li> } 
<li><div class=”message’”>Message 8</div></ .messages li:last-child .message { 
li> margin-bottom: Q; 
<li><div class=”message”>Message 9</div></ } 
li> -input { 


Force focus 


border: none; 
display: block; 
padding: 1px; 


To keep the chat box open even when it doesn’t 
have focus you can now force °:focus-within’ in } 
Chrome DevTools, just like you can with “:hover. 


width: 100%; 


Top 


The potential of “focus-within’ for UX improvements is 


exciting, but with great power comes great responsibility! 


Right 


In DevTools you can select the element and toggle the 
‘focus-within’ state making it easier to inspect 
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9. Scroll chaining 

Hopefully now you'll have a little chat box with a scrollable 
list of messages sitting on top of your newsfeed. Great. 
But have you ever noticed what happens when you scroll 
inside a nested area and you reach the end of its 
scrollable range? Try it. Scroll all the way to the end of the 
messages and you'll notice that the page itself will start 
scrolling instead. This is called scroll chaining. 

It's not a big deal in our example but in some cases it 
might be. We've had to work around this feature before 
when creating scrollable areas inside modals or context 
menus. The dirty fix is to set the <body> to ‘overflow: 
hidden, but there is a nice, shiny new CSS property that 
fixes all of this and it’s a simple one-liner. Say hello to 
‘overscroll-behavior. 

There are three possible values: 

¢ auto - the default, which allows scroll chaining 
¢ contain - disables scroll chaining 

¢ none - disables scroll chaining and other 

overscroll effects, such as rubberbanding 
We can use the shorthand ‘overscroll-behavior or we can 
target a specific direction with ‘overscroll-behavior-x’ (or 
-y’). Let’s add it to our ‘messages class: 

.messages { 


overscroll-behavior-y: contain; 
oe 
Now try the scrolling again and you'll see that it no 
longer affects the page's scroll when you reach the end of 
the content. 

This property is also pretty handy if you wanted to 
implement a pull-to-refresh feature in your PWA, say to 
refresh the newsfeed. Some browsers, such as Chrome 
for Android, automatically add their own and until now 
there has been no easy way to disable it without using JS 
to cancel events using performance-impacting 
non-passive handlers. 

Now you just need to add ‘overscroll-behavior. contain’ 
to the viewport-containing element, probably <body> 
or ‘<html>. 

It’s worth noting that this property is not a W3C 
Standard, rather a proposal by the Web Incubator 
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Community Group (WICG). Popular, stable and mature 
WICG proposals are considered for migration to a W3C 
Working Group at a later stage. 


10. Collapse the chat box when 
not in use 

At the moment the chat box takes up quite a bit of space, 
which unless were interacting with it is a bit distracting. 
Fortunately we can do something about this with a little 
CSS magic. 

But first of all we need to modify our existing styles 
Slightly. By default we want the chat box to be collapsed, 
SO we need to reduce the ‘max-height’ value in the 
“messages class. While we're there we can also add a 
transition to the ‘max-height’ property: 

.messages { 


max-height: 25px; 
transition: max-height 5@@ms; } 


11. Expand the chat box when it 
receives focus 

So our chat box is currently collapsed and unusable. How 
can we expand it using only CSS? Time for a new feature 
- the Focus Container pseudco-class °:focus-within’. 

This is just like the old faithful “focus pseudo-class 
selector, but it matches if any of the element's 
descendants have focus. This is interesting because it is 
the reverse of how CSS usually works, where you can 
only select elements based on their ancestors. It opens 
up some interesting potential. 

Adding this class will set the ‘max-height’ of the 
“messages element to 300px, when anything inside the * 
chat’ area receives focus. 

Remember that an element must accept keyboard 
or mouse events, or other forms of input, in order to 


receive focus. Clicking in the *<input> will do the job. 
[ .chat:focus-within .messages { 
max-height: 3@@px; } 


12. Taking focus further 
This is nice, but what else can we do? How about blurring 
the newsfeed when the chat box has focus? Well with the 
help of the subsequentsibling combinator (~’) we can do 
this really easily because the markup for the chat box is 
before the newsfeed markup: 
.chat:focus-within ~ .container { 

[ filter: blur(5px); } 
That’s all it takes! We can soften the effect slightly by 
adding a transition on the filter property to the original 
‘container class. 

Now were not suggesting this is a good idea, but we 
think it’s pretty cool that we can co this with CSS alone. 


13. Another new pseudo-class 
There are a number of new pseudo-classes described in 
CSS Selectors Module Level 4. Another interesting one is 
“placeholder-shown’ which matches any input that is 
showing placeholder text. 
At the moment our text field doesn't have any 
placeholder text so let's add some. 
[ <input type="text” class=”input” 
placeholder=”Enter your message”> 
And then immediately after the text field add a helper 
message to show the user. 
[ <div class="prompt”>Press enter to send</ 
div> 
Now add some styling for the helper message, so that by 
default it is collapsed. 
.prompt { 
line-height: 2em; 
max-height: Q; 


Recommended reading 


CSS Containment Module Level 1 - contain: paint; 

W3C status - Candidate Recommendation 
https.//drafts.csswg.org/css-contain-1 
https.//caniuse.com/#feat=css-containment 
https://developers.google.com/web/updates/2016/06/css-containment 


CSS Display Module Level 3 - display: contents; 
W3C status - Working Draft 
https.//drafts.csswg.org/css-display 
https.//caniuse.com/#feat=css-display-contents 


CSS Overscroll Behavior Module Level 1 - overscroll-behavior: contain; 
W3C status - Unofficial 

https://wicg.github.io/overscroll-behavior 
https://caniuse.com/#feat=css-overscroll-behavior 
https://developers.google.com/web/updates/2017/Tl/overscroll-behavior 


CSS Conditional Rules Module Level 3 - @support...) {...} 

W3C status - Candidate Recommendation 
https://www.w3.org/TR/css3-conditional 
https://developer.mozilla.org/en-US/docs/Web/CSS/%4Osupports 


CSS Selectors Module Level 4 - :focus-within 

W3C status - Working Draft 

https.//www.w3.org/TR/selectors-4 
https.//caniuse.com/#search=pseudo-class 
https.//developer.mozilla.org/en-US/docs/Web/CSS/focus-within 
https://developer.mozilla.org/en-US/docs/Web/CSS/placeholder-shown 


overflow: hidden; 

padding: @ 1Qpx; 

text-align: right; 

transition: max-height 5@Qms; } 


14. Making the prompt visible 

At the moment the prompt is hidden so how can we use 
“placeholder-shown’ here? Well (most) browsers will 
display the placeholder text until the field has a value. Just 
setting focus won't hide the placeholder. This is helpful 
because we dont want the user to send a blank message 
anyway, SO we can hook into this behaviour to show the 
prompt only when the user has entered a value. 

Of course in the real world we'd need some validation 
too. We can use the negation pseudo-class ‘:not’ to flip 
the meaning of ‘:olaceholdershown’ and show the 
prompt when the placeholder text is not shown, ie the 
field has a value. 

.input:not(:placeholder-shown) + .prompt { 
| max-height: 2em; } 
Setting the ‘max-height’ to double the 1Opx font-size, 
using 2em, will expand the block and the text becomes 
visible. Neat. 

Expect to see some clever uses for this seemingly 
mundane pseudo-class if it makes it through to the 
final spec. 


15. Bringing it to life 
We've built the bare bones of a newsfeed with a chat 
feature using some of the new properties coming to CSS, 
but at the moment it is lifeless - you cant actually do 
anything with it. One particularly interesting new feature is 
CSS Containment, but it is difficult to demo without 
modifying the DOM. Let’s add some super-simple JS to 
allow us to add messages to our chat box. 

First of all we need to add an |D to the ‘<input>’ and the 
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messages <ul>. We can also add a required attribute to 
the input too. 
[ <ul id=”"messages” ... 

<input type="text” id=”input” required ... 
Then create an empty JS file called script.js and add it to 
the page just before the closing ‘</body>’ tag so we don't 
have to wait for DOM ready. 
[ <script src=”script.js”></script> 

</body> 


16. Add alittle sprinkle 

of JavaScript 

We need to add an event handler to the ‘<input>’ which 
listens for an Enter keypress, validates the field, takes the 
value (if valid) and adds it to the end of the messages list, 


clears the field and scrolls to the bottom of the messages. 


Something like this will do the job for our demo but dont 
use this in production! 
// Finds the important elements 
const input = document. 
getElementById( ‘input’ ) ; 
const messages = document. 
getElementBylId( ‘messages’ ) ; 
// Listens for keypress events on the input 
input.addEventListener( ‘keypress’, (event) 
=S of 
// Checks if the key pressed was ENTER 
if (event.keyCode === 13) { 
// Checks the field is valid 
if (input.validity.valid) { 
// Creates a DOM element using the value 
const message = createMessage(input. 
value) ; 
// Appends the new message to the list 
messages. appendChild(message) ; 
// Clears the field 
input.value = ‘’; 
// Scrolls the messages to the bottom 
messages.parentNode.scrollTop = messages. 
parentNode.scrollHeight; 


i 
3 


5 
// Converts value to string of HTML 


function createMessage (value) { 
// Warning: Don’t do this in production 
without sanitizing the string first! 
return stringToDom(*<li><div 
class=”message”>${value}</div></1li>* ) 
3 
// Converts string to real DOM 
function stringToDom (string) { 
const template = document. 
createElement( ‘template’ ) ; 
template.innerHTML = string.trim(); 
return template.content.firstChild; } 
Now when you type in the field and press Enter you'll see 
your message added to the bottom of the elements list. 


17. Adding some additional info 
In order to demonstrate one of the benefits of the final 
new CSS property: ‘contain we need to do something a 
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little contrived. We're going to implement a feature that 
displays the time a new message was sent in a box at the 
top of the messages list. This will appear when you hover 
your mouse over a message. 

First up we need to add this information to our new 
messages. We can modify the ‘return line of the 
‘createMessage function to add the current time to 
an attribute. 

return stringToDom(* 
<li> 
<div class=”message message--mine” 
data-timestamp=”${new Date().toString() }’> 
${ value} 
</div> 
</li> 
bs 
You might have noticed that new messages have an 
additional class ‘message--mine. Let’s add a quick class so 
they stand out and align to the right of the list. 
.message--mine { 
background: #ff2089; 
margin-left: 20%; 
margin-right: Q; 
3 


18. Displaying the timestamp 

So our goal is to make the message's timestamp appear 
at the top of the list of messages, but we need to do it so 
it is always visible even when the list is scrolled. 

First off let’s try and render the value using a 
pseudo-element. We only want to co this for our 
messages. See below. 

.message--mine::after { 
content: attr(data-timestamp) ; 
3 
That should display the timestamp inside the message. 
Let's modify it slightly so it only appears on ‘hover, has a 
bit of styling and is fixed to the top of the messages area 
SO it is visible even when scrolled. 
.message--mine:hover: :after { 
background: #0QQ; 
color: #ff2089; 
content: attr(data-timestamp) ; 
left: Q; 
padding: 5px; 
position: fixed; 
top: Q; 
width: 100%; 


Hmm, it sort of works but it is appearing at the top of the 

page rather than the scrollable area. Let’s add ‘position: 

relative’ to the ‘messages pane to try and contain it. 
.messages { 


position: relative; 


Ah, it doesn't work either because fixed positioning is 
anchored to the viewport, not its relative ancestor. 
Time for our final new property - ‘contain. 


19. Containment 

CSS Containment is an exciting new proposition. It has a 
number of options which give you the ability to limit the 
browser's styling, layout and paint work to a particular 
element. This is of particular benefit when modifying the 
DOM. Some changes - even small ones - require the 
browser to relayout or repaint the entire page, which 
obviously can be an expensive operation even though 
browsers work hard to optimise this for us. 

Using CSS Containment we can essentially ring-fence 
parts of the page and say “what happens in here, stays in 
here’. This also works the other way around and the 
ring-fenced element can be protected from changes 
made outside. 

There are four values for ‘contain’ each with a different 
purpose. You can combine them as you require 
e layout - ensures that the containing element is totally 

opaque for layout purposes; nothing outside can affect 

its internal layout, and vice versa 

¢ paint - ensures that the descendants of the containing 
element don't display outside its bounds 

e style - ensures that certain properties don't escape 
the containing element (this sounds like the 
encapsulation you get with the Shadow DOM, but it 
really isn’t) 

e size - ensures that the containing element can be laid 
out without using the size of its descendants 

Alternatively you can use one of two keywords as a kind 

of shorthand: 

e strict is an alias for ‘layout paint style size’ 

« content is an alias for ‘layout paint style’ 

Each of these values are a little opaque so | would 

recommend reading the spec and playing around with 

them in Devlools to see what actually happens. 

The two important values are ‘layout’ and ‘paint’ as 
they offer performance optimisation opportunities when 
used within complex web apps that require a lot of DOM 
manipulation. In our rudimentary demo however we can 
leverage one of the consequences of using ‘contain: paint’ 
to help us with the timestamp positioning. 

According to the spec, when using ‘paint the “element 
acts as a containing block for absolutely positioned and 
fixed positioned descendants”. This means we can set 
‘contain: paint’ on the ‘chat’ class and the fixed positioning 
will be based on the card rather than the viewport. You'd 
get the same effect by using ‘transform: translateZ(O)’ but 
containment feels less hacky. 

chat { 


contain: paint; 


al 


20. Wrapping up 

That concludes our whistle-stop tour of some new CSS 
features. Most of them are pretty straightforward, 
although we'd definitely recommend delving into CSS 
Containment in more detail. We've only really touched on 
a small part of it here and it is the kind of feature that 
sounds like it does something that it actually doesn't - the 
encapsulation of styling. That said it could prove very 
helpful, and it is already at the Candidate 
Recommendation stage, so it’s well worth a look. 
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s developers, we sometimes take CSS 
for granted. By changing a couple of 
properties, we can change the look of 
an entire website. Browser vendors are 
doing a lot of work on our behalf to get to that point. 
But as new CSS features come out, it can be a while 
until we get to use them for production sites. Users 
with old browsers will be stuck with a downgraded, 
progressively enhanced set of styles that do not look 


as good as those in modern browsers. 

Houdini is set to change all that. It is a collection of 
draft specifications that gives developers access to some 
of the behind-the-scenes magic provided by CSS. Once 
all the specifications are complete, developers will be able 
to use JavaScript to determine how aspects such as 
layout and style calculations are performed. 

While some of these APIs are still in their early stages, 
the first has now landed in Chrome Stable as of vod. 

The CSS Paint API enables developers to create images 
in JavaScript for use wherever an image would normally 
be used in CSS. At the moment the API is only supported 
in Google Chrome, but other browsers are working to 
include it soon. 

In this tutorial we will be using the API in a couple of 
ways. One will create a dynamic background that follows 
the cursor, while the other uses the image as a mask to 
Shape other elements. The same techniques are used in 
both scenarios, which goes to show how versatile this 
new API can be. 


1. Install local server 
While all the code that we will write has no dependencies, 
we need to use a package called ‘http-server’ to serve the 
files while we are developing. This creates a lightweight 
server based on the project directory. 
Open Terminal and install the server dependency from 

‘nom. Then start the server and open it up in Chrome. 

> npm install 

> npm start 


2. Load a paint worklet 

All the work is going to happen inside a paint worklet. A 
worklet is a small module that performs a specialised job. 
A paint worklet deals with what the browser renders 
when it updates the screen. 

Open up ‘squiggle.Atml and load the worklet in the 
script block. As the feature is not in every browser yet, 
we also need to check to see if it is supported. 

| if (‘paintWorklet’ in CSS) { 

: CSS. paintWorklet 

.addModule(‘/scripts/squiggle. js’); 
} 


3. Track mouse movement 

Once finished, the generated image will orientate itself 
based on the position of the cursor. We need to track the 
movements by adding them as custom properties, which 
we will use in later steps. 

Under where we added the module, add an event 
listener for mouse movement events. When that fires, it 
records the position as a custom property. 

document.addEventListener(‘mousemove’, 

event => { 
document .documentElement.style 
.setProperty(‘--x-position’ , 
event.clientx) ; 
document .documentElement. style 
.setProperty(‘--y-position’ , 
event.clienty) ; 


1) 


4. Draw in the context 
Open up ‘scripts/squigglejs’ to see the loaded module. 
The important method here is ‘paint’, which runs each 
time the browser needs to repaint. That can be for 
anything from a screen resize to another element 
changing position. 

The first parameter here is the context, which is 
very similar to a canvas context and uses some of 
the same controls. 
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Draw a small square in the context to make sure it 
works correctly. 

ctx.lineWidth = width; 

ctx.strokeStyle = “white”; 

ctx.rect(@,0,100,100); 

ctx.stroke() ; 


5. Register the worklet 

Before we can start to link up the worklet with CSS, we 
need to register it with the page. To do that, the 
‘registerPaint’ function will create a mapping for us to 
refer to it in any CSS file. 

Right at the bottom of ‘squiggle.js, register the worklet 
module with the name ‘squiggle. This name will be used 
to link everything together in the next step. 

§ registerPaint( ‘squiggle’, 
| SquiggleModule) ; 


6. Set a background image 

Paint worklets create images for CSS to use. These can be 
used wherever a property can accept an image, similar to 
how ‘urlO’ or ‘linear-gradientQ’ can be used. 

Open up ‘styles/squiggle.css’ and set the background 
of the ‘test’ class to the new worklet. Use an extra 
background colour to fill in everything that the worklet 
does not render. 

background-image: paint(squiggle) ; 
background-color: var(--background-color) ; 


7. Set up input properties 

In the previous step, we defined the background colour 
using a custom property, which were defined at the top of 
the file against ‘root’ - the <html> element. These are 


Keeping it secure 


This API - alongside any new ones created in 
the future - must be called on a script served 
over HTTPS in order to function. The only 


exception is when developing on localhost. 


Left 

Similar to canvases, 
the context of paint 
worklets start from 
the top-left corner. 
The containing 
element defines its 
width and height 
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great to change values in one place and have them 
update across the document including paint worklets. All 
we need to do is tell the worklet which custom properties 
we are interested in. 

At the top of ‘scripts/squigglejs, define the input 
properties for this worklet. These include the colours 
used for the page, as well as other inputs we will use in 
later steps. 

static get inputProperties() { 
return [ 
‘--dropshadow-color’ , 
‘--foreground-color’ , 
‘--dropshadow-color’ , 
‘--dropshadow-distance’ , 
‘--x-position’, 
‘--y-position’ 
J; 
} 


8. Define stoke settings 

The third argument on the ‘paint’ method holds the 
values for all the input properties at the time of painting. 
We can use those to change the style of what gets drawn 
on the canvas. 

Replace the ‘lineWidth’ and ‘strokeStyle’ assignments 
from Step 4 with the following. The getter will return an 
object, which needs converting to a string to use with 
the context: 

mi ctx. strokeStyle = properties. get( 
| ‘--foreground-color’).toString(); 
ctx.shadowOffsetX = properties. get( 
‘--dropshadow-distance’ ).toString() ; 
ctx.shadowOffsetY = properties. get( 
| ‘--dropshadow-distance’ ). toString() ; 
ctx.shadowColor = properties. get(‘ 


Mask transparency 


When creating a mask image, anything not 


transparent will let the layer below through. 
Create a vanishing effect by using a gradient 
that fades to transparent. 


Top 

Without moving the context to O,0 the first line will instead 
act as the starting point. The result is an arrow shape rather 
than a lightning bolt 


Right 

A text zoom bug in Google Chrome means that the context 
will not render any smaller than its original size at 100 per 
cent when zoomed out 
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Elements Console 


Tm fl 


Styles Event Listeners DOM Breakpoints Properties Accessibility »” 


Sources 


Network » * a» 


7 


Filter shov .cls + | 

:root { squiggle. 
——-background-—color: H§rgqb(73, 49, 168); : 
——-foreground—color: rgb(200, 100, 0); : 
--dropshadow-color: Mirgba(®, 0, 0, 0.4); : 
—-dropshadow-distance: 10; 4 


--dropshadow-color’ ).toString(); 
ctx. lineWidth = width; 
ctx.lineCap = ‘round’; 


9. Set up shape loop 

To spread the squiggle shapes in both dimensions, we 
can use a loop to iterate over the width and height. The 
second parameter for the ‘paint’ method provides the 
dimensions of the paint area, which we can use as limits 
for the loop. 

We also need to apply an offset to keep the shapes 
centred. This is done by calculating the space left over 
once all the shapes have been placed. 

Clear the ‘rect’ and ‘stroke’ calls from Step 4 and 
replace them with the following: 

let offsetX = (geom.width / 2) 
% (width * spacing); 
let offsetY = (geom.height / 2) 
% (width x spacing); 


for(let y = @; y < geom.height/ 
(width * spacing) + 1; y++t) { 
let count = Q; 
for(let x = @; x < geom.width/ 


(width * spacing) + 1; xt+) { 
} 
} 


10. Calculate draw position 

These loops will add as many shapes as they can for each 
row, then move down to the next row. By drawing the 
Shapes inside the innermost loop, they will be spread 
across the painted element. 

First, we need to calculate each position based on the 
iteration of ‘x’ and ‘y we are on. 

We can do that by multiplying the line thickness and 
the spacing between them by how many times we have 
looped so far. From that, take off any offset calculated to 
keep things lined up. 

let pointX = (x * width * spacing) 
- ((width * spacing) - offsetxX); 

let pointY = (y * width * spacing) 
- ((width * spacing) - offsetyY); 


11. Call to draw the shapes 
With the values in place, we can call the dedicated 
‘drawPoint method we will use to draw the shapes. This 


Is Houdini ready yet? 


@ ¢ 


Apple Safari § Google Chrome MicrosoftEdge Mozilla Firefox Opera 
[S segsorntd no signal no signal no signal no signal 
Hohl Apt “ee nosignal no signal no signal 
2¢ Demos Article : Details 

‘pola ne ; no signal no signal no signal no signal no signal 

partially (Canary) development 
ene — AP! no signal no signal no signal 
. a es . | no signal no signal no signal 
Typed OM , — nosignal = ~Aig-signal 

i” Details Details 
et | 

Font sane - no signal no signal no signal 


will take all the information we have at the time in order to 
draw it correctly. 

As well as the calculated points, we should supply the 
position values of the mouse, the defined width of each 
squiggle line, and a reference to the context to draw upon. 

this.drawPoint(pointX, pointy, 
properties. get(‘--x-position’), 
properties. get(‘--y-position’), 
width, “ctx): 


12. Draw from each point 

The position values supplied to drawPoint indicate the 
location where the squiggle lines will start from and 
rotate around. 

For each point we translate the context to the defined 
position and move our reference point to ‘O,O° This lets us 
draw each shape without worrying about offsets against 
the start position. From there we describe a line, draw it 
and then restore the original context positioning for the 
next point. 

ctx. save(); 

ctx. beginPath() ; 
ctx.translate(x, y); 
ctx.moveTo(Q,Q); 
ctx. lineTo(10, 8); 
ctx. lineTo(20, Q); 
ctx. lineTo(30, 8); 
ctx. stroke(); 

ctx. restore(); 


13. Orientate towards cursor 
By moving the context to ‘O,O’ the starting point of each 
line also becomes its rotation point. As we save and 


restore the context after drawing it means we can rotate 
each shape independently of the others. 

Just after translation, rotate the context to the 
appropriate angle calculated in a separate method. If the 


cursor has not moved yet, it will not have any position set. 


Avoid rotating at all if that is the case. 
if (cursorX && cursory) { 

ctx. rotate( 
this.calculateAngle( 
xX, Y, 
cursorx. toString(), 
cursory. toString() 
) 
); 
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What is Houdini 
capable of? 

The Paint API forms part of 
Houdini - a collection of APIs 
and specifications designed 
to decrease the friction 
between JavaScript and CSS. 
By exposing some of the 
magic that browsers perform 
to developers, we are able to 
make adjustments to the page 
that work best for our specific 
use-case. 

Fixed in the middle of these 
advancements is the concept 
of a worklet - a lightweight, 
highly specialised class 
focused on specific actions 
such as animations. They are 
similar to Web Workers, which 
execute away from the main 
thread and keep the page 
responsive. These can be 
expanded upon in future as the 
needs of developers evolve. 

The draft APIs are 
constantly changing and those 
present at the moment may 
not resemble what eventually 
lands in browsers. Keep an 
eye onishoudinireadyyet. 
com to stay ahead of the 
latest improvements. 


14. Calculate the rotation angle 


The ‘calculateAngle method does not yet return anything, 


which is why the shapes have not yet rotated. 

We know the two points - the shape and cursor 
positions - and by measuring the arctangent between 
these two points, we get the angle in radians. JavaScript 
includes the necessary function to calculate this for us. 
Update ‘calculateAngle’ to return the correct value. 

return Math.atan2(cursorY - pointY, cursorx 
| —- pointx); 


15. Mix up the rows 

This works great, but having each shape lined up is not 
the best effect. We can update the ‘for loop from earlier 
to offset every other shape to sit in between the other 
rows for a polka cot effect. 
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7. The 2D rendering context 
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interface Puistfenderiagfiosterti0 | 
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Palathender 
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Back in the paint method, within the inner ‘for’ loop, 
use the count variable to offset every other shape. By 
adding another half of the spacing, this means it lands 
halfway between each row. 

count++; 

if (count % 2 Ly of 
pointY += (width * (spacing / 2)); } 


16. Another use of the API 


So far, we have been able to create an interactive 


background without creating any new elements. But the 
CSS Paint API is capable of much more. For example, we 
can combine it with image masks to reshape elements 
on demand. 

To show how this might work, navigate to /mask’ for a 
different example. 


17. Apply masking CSS 
Before we start creating the worklet, we need to set the 
mask on each image. 

While the CSS property needed is ‘mask-image, it is 
Still prefixed in Chrome. This means we also need the 
Webkit prefix alongside it. 

Open up ‘styles/mask.css’ and update the styles for 
the ‘masked’ class. 

Part of the effect is to fully reveal the image when the 
user hovers over it. Add a ‘reveal’ custom property to the 
element in that instance. 

.masked { 

[...] 

-webkit-mask-image: paint(mask) ; 

mask-image: paint(mask) ; 

} 
.masked:hover, .masked:focus { 
--mask-reveal: true; 
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18. Apply mask shape property 
Custom properties do not need to be on the root element 
to be picked up by the API. They can be applied to the 
element being painted to, which will override any 


selectors with a lower specificity. 

Now were going to apply a special ‘mask-shape’ 
custom property to three shape classes. This tells the 
worklet which shape to render. 

.masked.square { 
--mask-shape: square; 

} 

.masked.circle { 
--mask-shape: circle; 

} 

.masked.triangle { 
--mask-shape: triangle; 


I 


19. Define which shape to use 

Open ‘scripts/mask.js. This has already been filled out with 
some of the logic to create the shapes. We still need to tie 
it together with the classes we just wrote. 

The ‘mask-shape’ custom property defines the shape 
that’s going to be used. We have a circle, a square or a 
triangle to choose from. If someone chooses a different 
Shape or no shape at all, default to a circle shape. Trim off 
any spaces left by CSS formatting. 

let shape = ‘circle’; 
if (properties.get(‘--mask-shape’) && 
‘circle’ ] 


[‘square’, ‘triangle’, 


.includes(properties. get ( 


Limitations of Paint Worklets 
Paint worklets work ona context system 
very similar to the rendering context 
found when working with <canvas> 
elements. Both let you draw paths, fill 
shapes and apply gradients that work 

in the same way. But for safety and 
performance reasons, some things are 
not yet possible inside these worklets. 

Text drawing methods are not present 
for security reasons. Different browsers 
render the same string within a context 
with slight differences. Malicious code 
could detect these anomalies and 
calculate the browser and machine 
being used - a technique known as 
‘fingerprinting’. 

It is also not possible to use any 
ImageData methods to read and write 
pixels from the context. Since worklets 
have been designed to be fast and 
lightweight, reading the data in this 
manner on each frame can create a 
performance bottleneck. 


‘--mask-shape’). toString().trim())){ 
shape = properties. get( 


‘--mask-shape’). toString().trimQ); } 


20. Decide whether to reveal 

By default, the masks provide the outline of the defined 
Shape. When the user hovers over them, the ‘reveal’ 
custom property becomes true, so that should fill the 
Shape in. 

Custom property types are coming at a later point, 
which means for now a ‘true’ value will be passed as a 
string. Match against the string and set a new variable if 
it is set. 

let reveal = false; 

if (properties. get(‘--mask-reveal’) && 
properties. get(‘--mask-reveal’ ) 
.toString().trim(Q) == ‘true’) { 
reveal = true; } 


21. Find the smallest length 


Finally, we want the shapes to have sides of equal length. 
This means we need to find the smallest of either the 
width or height of the image and use that length to 
calculate the shapes. 

Define the ‘maxLength’ variable to tell the rest of the 
code what size to make the shapes. Set the line width of 
the context to a proportion of this size in order to keep 
things to scale. 

const maxLength = 
Math.min(geom.width, geom.height) ; 
ctx. lineWidth = maxLength / 25; 


C) GRAPHY 


FILM Ayre Sh 


STAR WARS 


Discover another of our great bookazines 


From science and history to technology and crafts, there 
are dozens of Future bookazines to suit all tastes 


PORSC HE oul 
OLLI 


Get great savings when 1000s of great titles, many World-wide delivery and 


you buy direct from us not available anywhere else super-safe ordering 
+ ..,¢ www.myfavouritemagazines.co.uk 
1 r Magazines, back issues & bookazines. 


Featured host: Netcetera 


netcetera.co.uk 
03330 439780 


About us 


Formed in 1996, Netcetera is one of 
Europe's leading web hosting service 
providers, with customers in over 75 
countries worldwide. 

As the premier provider of 
data centre colocation, cloud hosting, 
dedicated servers and managed web 
hosting services in the UK, Netcetera 
offers an array of services designed to 
more effectively manage IT 


What we offer 


- Managed hosting - A full 
range of solutions for a cost- 
effective, reliable, secure host. 


- Cloud hosting - Linux, 
Windows, Hybrid and Private 
Cloud Solutions with support 
and scalability features. 


5 tips from the pros 

1. Reliability, trust & support 
Reliability is a major factor when it 
comes to choosing a hosting partner. 
Netcetera guarantees 100 per cent 
uptime, multiple internet routes with 
the ability to handle DDOS attacks, 
ensuring your site doesn't go down 
when you need it. 


2.Secure and dependable 
Netcetera prides itself on offering its 
clients a secure environment. 

It is accredited with ISO 27001 for 
security along with the options of 
configurable secure rackspace available 
in various configurations. 


3. 24/7 technical support 


Netcetera has a committed team of 


infrastructures. A state-of-the-art data 
centre environment enables Netcetera 
to offer your business enterprise-level 
colocation and hosted solutions. 
Providing an unmatched value for your 
budget is the driving force behind our 
customer and managed infrastructure 
services. From single server to fully 
customised data centre suites, we focus 
on the IT solutions you need. 


- Data centre colocation - 
Single server through to full 
racks with FREE setup and a 
generous bandwidth. 


- Dedicated servers - From 
QuadCore up to Smart Servers 
with quick setup and 
fully customisable. 


knowledgeable staff available 24/7 to 
provide you with assistance when you 
need it most. Our people make sure 
you are happy and your problems are 
resolved as quickly as possible. 


4. Value for money 

We do not claim to be the cheapest 
service available, but we do claim to 
offer excellent value for money. We also 
provide a price match on a like-for-like 
basis, as well aS a price guarantee for 
your length of service. 


5. Eco-friendly 

Netcetera’s environmental commitment 
is backed by use of eco-cooling and 
hydroelectric power. This makes 
Netcetera one of the greenest data 
centres in Europe. 
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Testimonials 

Roy T 

i have always had great service from Netcetera. Their technical support is 
second to none. My issues have always been resolved very quickly, 


Suzy B 

“We have several servers from Netcetera and their network connectivity is 
top-notch, with great uptime and speed is never an issue. Tech support is 
knowledgeable and quick in replying. We would highly recommend Netcetera. 


Steve B 

“We put several racks into Netcetera, basically a complete corporate backend. 
They could not have been more professional, helpful, responsive or friendly. All 
the team were an absolute pleasure to deal with, and nothing was too much 
trouble, so they matched our requirements 100 per cent.” 
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SSD web hosting 


| <> bargainhost 


Cwcs.co.uk 

08001777 000 

CWCS Managed Hosting is the UK’s 
leading hosting specialist. They offer a 
fully comprehensive range of hosting 
products, services and support. Their 
highly trained staff are not only hosting 
experts, theyre also committed to 
delivering a great customer experience 
and are passionate about what they do. 


| bargainhost.co.uk 

| 0843 289 2681 

Since 2001, Bargain Host have 
campaigned to offer the lowest possible 

| priced hosting in the UK. They have 

| achieved this goal successfully and built 

up a large client database, which includes 

many repeat customers. They have also 

won several awards for providing an 

— outstanding hosting service. 


- Colocation hosting | - Shared hosting 

- VPS ; - Cloud servers 

- 100 per cent network uptime Budget hosting with high-performance hosting products | »« Domain names 
as well as the infrastructure for the 


| b | f= I Zi lie RR efficient operation of sites. A combination 


Uk-based hosting ONLINE of stable technology, attractive pricing, Value Linux hosting 
flexible support and services has enabled 
Ge CYBERHOST +49 (0)9831505-0 ee eet braces 
WEB HOSTING 
Hetzner Online is a professional web 

cyberhostpro.com hosting provider and experienceddata +» Dedicated/shared hosting patchman-hosting.co.uk 
0845 5279 345 centre operator. Since 1997, the company « Colocation racks 01642 424 237 
Cyber Host Pro are committed to has provided private and business clients - SSL certificates Linux hosting is a great solution for 
providing the best cloud server | home users, business users and web 
hosting in the UK; they are obsessed | designers looking for cost-effective and 


with automation. If youre looking for a 
hosting provider who will provide you 
with the quality you need to help your 
business grow, then look no further 
than Cyber Host Pro. 


powerful hosting. Whether you are 
building a single-page portfolio, or you 
| are running a database-driven 

| eCommerce website, there is a Linux 
hosting solution for you. 


- Cloud VPS servers 
- Reseller hosting 
- Dedicated servers 


- Student hosting deals 
'« Site designer 
| « Domain names 


Cluster web hosting Flexible cloud servers 
fasthosts 'elastichosts 
| elastichosts.co.uk 
fasthosts.co.uk - 020 7183 8250 
0808 1686 777 All-inclusive hosting operates across ten countries. With a ElasticHosts offer simple, flexible and 
UK-based and operating 24/7 from comprehensive range of high- cost-effective cloud services with 
dedicated UK data centres. Fasthosts performance and affordable products, 1&1 high performance, availability and 
keep over one million domains running offers everything from simple domain _ scalability for businesses worldwide. 
smoothly and safely each day. Services registration to award-winning website | Their team of engineers provide 
can be self-managed through the landi.co.uk building tools, eCommerce packages and excellent support 24/7 over the phone, 
Fasthosts Control Panel. 0333 336 5509 powerful cloud servers. by email and with a ticketing system. 
1&1 Internet is a leading hosting 
- Dedicated servers provider that enables businesses, «- Easy domain registration _+ Cloud servers with any OS 
- Cloud servers developers and IT pros to succeed - Professional eShops _« Linux OS containers 
- Hosted email online. Established in 1988, 1&1 now - High-performance servers | - 24/7 expert support 
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Northcoders is the coding bootcamp 
for the north, based in the heart of 
Manchester and built upon northern 
values of grit, determination and 
community spirit. No matter what 
your background, you can fast-track 
your career and become a web or 
software developer in 12 weeks at their 


e Full-time: 
Fasttrack your career 
in just 12 weeks. 


1. Get started with coding 
The best way to know if coding 
is for you is to just try it! We 
recommend the free, online 
JavaScript track of 
Codecademy to get you 
Started with the basics. 


2.Do your research 

Make sure you read plenty 
of student reviews to make 
sure youre applying 
somewhere reputable. Read 
their blog and have a look at 
their social channels. 


3. Throw yourself in 
Once you've decided it’s right 


Featured: 


Northcoders 


northcoders.com 
Twitter: @northcoders 


_ Facebook: Northcoders 


full-time bootcamp, or fit their course 
around your life with their 24-week 
part-time bootcamp. Their internal 
career support team will help find you 
work as a developer, setting up 
interviews with your choices of 
Northcoders Hiring Partners across 
the north of England. 


e Part-time: 
Fit our Curriculum around 
your life in 24 weeks. 


for you, set aside a few evenings 


each week to really start making 
progress! If coding is for you, 
this should be fun. 


4.Be prepared 

We'll be with you every step of 
the way when you apply. Make 
sure you go through all the 
materials we recommend and 
ask for help if you're stuck. 


5. Get social 

With Northcoders, youre not 
just on a course, youre part of a 
community that will stay with 
you long after you graduate. 
Make the most of it! 


Becoming part of this vibrant, caring community was 
something | hadn't expected before the course, but 
now | couldn't be without it. To be a Northcoder is to 
be enlightened, inspired and supported. 


Joanne Imlay 


Primary school teacher to software developer at Careicon 
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& #& Northcoders delivered their part of the bargain in spades. 
| “— * They provided tremendous assistance in turning me into 
the full product - a well-rounded, capable, future tech 
employee - and they have the contacts to deliver the 
opportunities for such people. 
Joe Mulvey 
Maths teacher to software developer at Auto Trader 
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UDEMY 
udemy.com ; : wegotcoders.com 

| | Jit E : | | hello@wegotcoders.com 
Twitter.@udemy = ' We Got Coders is a consultancy that 
Facebook: udemy provides experts in agile web 


development, working with startups, 
The inspiration for Udemy beganina coe SER be Eainay agencies and government. Take one of 
small village in Turkey, where founder wee 6 = p N Ae | [ | DN 

Eren Bali grew up frustrated by the : es UE LEM 


limitations of being taught ina 
‘ | « Classroom-based training 
7. 


One-room school house. Realising 
the potential of learning on the internet, 

; —-* eee |: Real-world work experience 

eo a = = i. = mR - Employment opportunities 


their 12-week training courses that covers 
all that is required to become a web 

| developer, with highly marketable 

| full-stack web development skills. 


hing 


he set out to make quality education 
more accessible. Udemy is now a 
global marketplace for learning and 
teaching online. Students can master 
new skills by choosing from an 
extensive library of over 40,000 
courses including HTML, CSS, UX, 


| FUTURELEARN 
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JavaScript and web development. + 


40,000+ courses: Thereisa | 
course for every designer and dev. 

Self-paced learning: Learn how 

to code at your own pace. L 


THE 
IRON YARD 


theironyard.com 


Twitter:@ThelronYard 
Facebook: ThelronYard 


The Iron Yard is one of the world’s 
largest and fastest-growing in-person | : ! + ll 
code schools. It offers full-time and 
parttime programs in backend 
engineering, frontend engineering, 
mobile engineering and design. The 
lron Yard exists to create real, lasting 
change for people, their companies 
and communities through technology 
education. The in-person, immersive 
format of The Iron Yard’s 12-week 
courses helps people learn to code 
and be prepared with the skills needed 
to start a career as junior-level 
software developers. 


12-week code school: Learn 
the latest skills from industry pros. 
Free crash courses: One-night 
courses, the perfect way to learn. 


Where will your 
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Future 
Learn 


futurelearn.com 
feedback@futurelearn.com 
Choose from hundreds of free online 
courses, from Language & Culture to 


| Business & Management; Science & 


Technology to Health & Psychology. 
Learn from the experts. Meet educators 
from top universities who'll share their 
experience through videos, articles, 
quizzes and discussions. 


- Learn from experts 


- Free courses 
- All-device access 


GYMNASIUM 


GYMNASIUM 


thegymnasium.com 
help@thegymnasium.com 
Gymnasium offers free online courses, 
designed to teach creative 
professionals in-demand skills. 
Courses are all self-paced and taught by 
experienced practitioners with a passion 
for sharing practical lessons from the 
design trenches. 


- Gain real-world skills 
- Get expert instruction 
- Career opportunities 
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backgrounds and more HTML, CSS, JS & PHP to follow our tutorials master this issue’s HTML, CSS 
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You can access FileSilo 

on any computer, tablet 
or smartphone device using any 
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If you have any 
problems with 
accessing content on FileSilo, 
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